目标
上一次做了一个简单的hello world，这个我给单页面应用加入路由，这里我用的是react-router v4。这里为了简单就只设置两个页面，一个home页面，一个about页面
项目设置
安装路由包
npm install react-router react-router-dom --save
编写应用
- 创建home和about组件
<root>/app/web/component/home/home.js
import React from 'react';
const Home = () => {
return (
<div>Home</div>
);
};
export default Home;
<root>/app/web/component/about/about.js
import React from 'react';
const About = () => {
return (
<div>About</div>
);
};
export default About;
- 设置浏览器端路由
<root>/app/web/component/app/admin.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from '../home/home';
import About from '../about/about';
const App = ({ msg }) => {
return (
<div>
<div>Hello { msg }</div>
<ul>
<li>
<Link to="/admin">Home</Link>
</li>
<li>
<Link to="/admin/about">About</Link>
</li>
</ul>
<hr />
<Route exact path="/admin" component={Home} />
<Route path="/admin/about" component={About} />
</div>
)
};
export default App;
这样当访问/admin的时候就会渲染home组件，访问/admin/about就会渲染about组件
然后我们期望浏览器端是使用H5的history API实现路由，所以我们使用BrowserRouter，修改
<root>/app/web/page/browser/admin.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import AdminApp from '../../component/app/admin';
ReactDOM.hydrate((
<BrowserRouter {...window.__STATE__}>
<AdminApp {...window.__STATE__}/>
</BrowserRouter>
), document.getElementById('root'));
- 设置服务端路由
首先，我们要确保当浏览器访问/admin 和 /admin/about这样的以/admin开头的路由的时候，服务器能够渲染出页面。也就是说，当访问/admin/about的时候，服务器不能返回404。我们修改
<root>/app/router.js
const admin = require('./controller/admin');
module.exports = app => {
const { router } = app;
// 匹配所有/admin开头的url
router.get('/admin(.*)', admin.admin);
};
/admin(.*) 代表所有访问以/admin开头的url时，都会被admin这个controller处理。这样就不会返回404了。
当然，光是不反回404还是不够的，我们需要react根据url渲染出对应的html文本，我们还需要修改
<root>/app/web/page/server/admin.js
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import AdminLayout from '../../component/layout/admin_layout';
import AdminApp from '../../component/app/admin';
const server = context => {
return (
<AdminLayout state={context}>
<StaticRouter {...context} location={ context.url } >
<AdminApp {...context} />
</StaticRouter>
</AdminLayout>
)
};
export default server;
上面代码关键点在于给StaticRouter传入了一个context.url，但是目前为止，我们还没有再服务端传入这个属性，所有需要修改
<root>/app/middleware/react_view.js
const assert = require('assert');
const path = require('path');
const fs = require('fs');
const ReactDOMServer = require('react-dom/server');
const defaults = {
view: path.resolve(process.cwd(), 'view'),
extname: 'js'
};
module.exports = (options, app) => {
options = options || {};
options = Object.assign({}, defaults, options);
assert(typeof options.view === 'string', 'options.view required, and must be a string');
assert(fs.existsSync(options.view), `Directory ${options.view} not exists`);
options.extname = options.extname.trim().replace(/^\.?/, '.');
app.context.render = function (filename, _context) {
if (!path.extname(filename)) {
filename += options.extname;
}
let filepath = path.isAbsolute(filename) ? filename : path.resolve(options.view, filename);
const context = Object.assign({}, this.state, _context);
// 添加 url 属性
if (!context.url) {
context.url = this.url;
}
try {
let view = require(filepath);
view = view.default || component;
this.body = ReactDOMServer.renderToString(view(context));
this.type = 'html';
} catch (err) {
err.code = 'REACT';
throw err;
}
}
};
目前为止，路由就加上了，执行命令
npm run build && npm run start
在浏览器输入http://localhost:3000/admin应该能看到
输入http://localhost:3000/admin/about应该能看到
