凡事都是現有1，再有2，然後有100…
我們處理好了事件綁定，那肯定還是需要路由配置的，話不多說，擼起來
新增路由文件
- 在src目錄下新建router.js
/**
* @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>
)
- 在components目錄裏新增導航模塊
頁面是使用了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/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="root">${html}</div>
<script src="/client.js"></script>
</body>
</html>
`
}))
app.listen(3000)
總結
簡單的幾步修改，就實現了路由處理。這邊留了一個尾巴，後邊再不，回顧一下實現過程。。。
- 第一步，新增基本路由文件配置
- 第二步，爲了方便路由切換，寫了一個簡單的導航模塊
- 第三部，在客戶端和服務端引入router.js
- 刷新頁面看結果…
- 完成代碼傳送門