react-ssr之路由配置

2019-06-09 08:52:22 阅读：345 来源： 互联网

标签：js react Header router import ssr 路由

凡事都是现有1，再有2，然后有100…

我们处理好了事件绑定，那肯定还是需要路由配置的，话不多说，撸起来

新增路由文件

/**
* @desc 这里是最基本的路由配置
* 只有两个页面，一个home，一个couter
*/
import React, {Component, Fragment} from 'react'
import { Route } from 'react-router-dom'
import Home from './containers/Home'
import Counter from './containers/Counter'

export default (
    <Fragment>
        <Route path="/" exact component={Home}></Route>
        <Route path="/counter" exact component={Counter}></Route>
    </Fragment>
)

页面是使用了bootstrap来做基本样式的

// src/components/Header/index.js
import React, {Component} from 'react'
import { Link } from 'react-router-dom'

export default class Header extends Component {
    render () {
        return (
            <nav className={"navbar navbar-inverse navbar-fixed-top"}>
                <div className="container-fluid">
                    <div className="navbar-header">
                        <a className="navbar-brand">SSR</a>
                    </div>
                    <div>
                        <ul className="nav navbar-nav">
                            <li><Link to="/">首页</Link></li>
                            <li><Link to="/counter">计数器</Link></li>
                        </ul>
                    </div>
                </div>
            </nav>
        )
    }
}

新增好了文件，我们从别的页面引入该文件

引入新增文件

客户端引入router.js

// src/client/index.js 
import React, {Fragment} from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import routers from '../routes'
import Header from '../components/Header' // 增加header
// hydrate 表示把服务端渲染未完成的工作完成，比如绑定事件完成
// 这里多一层包裹，不然会报错
ReactDOM.hydrate(<BrowserRouter>
    <Fragment>
        <Header />
        <div className="container" style={{marginTop: 70}}>
            {routers}
        </div>
    </Fragment>
</BrowserRouter>, document.getElementById('root'))

服务端引入router.js

// src/server/index.js
const Koa = require('koa')
const _ = require('koa-route');
import React, {Fragment} from 'react'
import {renderToString} from 'react-dom/server'
import routes from '../routes'
import { StaticRouter } from 'react-router-dom'
import Header from '../components/Header'

let app = new Koa()

app.use(require('koa-static')('public'))
// 这里路径改为*， 不管哪个路径，都组走这里
app.use(_.get('*', async function (ctx, next) {
    // 转义组件为字符串
    // 保持和客户端代码一致
    let html = renderToString(
        <StaticRouter context={{}} location={ctx.req.url}>
            <Fragment>
                <Header />
                <div className="container" style={{marginTop: 70}}>
                    {routes}
                </div>
            </Fragment>
        </StaticRouter>
    )
    // 下边引入bootstrap的css
    ctx.body = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
    </body>
    </html>
    `
}))

app.listen(3000)

总结

简单的几步修改，就实现了路由处理。这边留了一个尾巴，后边再不，回顾一下实现过程。。。

第一步，新增基本路由文件配置
第二步，为了方便路由切换，写了一个简单的导航模块
第三部，在客户端和服务端引入router.js
刷新页面看结果…
完成代码传送门

标签：js,react,Header,router,import,ssr,路由
来源： https://blog.csdn.net/weixin_33768153/article/details/91350139

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-ssr之路由配置

新增路由文件

引入新增文件

总结