目標(biāo)
上一次做了一個(gè)簡(jiǎn)單的hello world盆昙，這個(gè)我給單頁(yè)面應(yīng)用加入路由羽历，這里我用的是react-router v4。這里為了簡(jiǎn)單就只設(shè)置兩個(gè)頁(yè)面淡喜，一個(gè)home頁(yè)面秕磷，一個(gè)about頁(yè)面
項(xiàng)目設(shè)置
安裝路由包
npm install react-router react-router-dom --save
編寫應(yīng)用
- 創(chuàng)建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;
- 設(shè)置瀏覽器端路由
<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;
這樣當(dāng)訪問(wèn)/admin的時(shí)候就會(huì)渲染home組件，訪問(wèn)/admin/about就會(huì)渲染about組件
然后我們期望瀏覽器端是使用H5的history API實(shí)現(xiàn)路由炼团，所以我們使用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'));
- 設(shè)置服務(wù)端路由
首先，我們要確保當(dāng)瀏覽器訪問(wèn)/admin 和 /admin/about這樣的以/admin開頭的路由的時(shí)候瘟芝，服務(wù)器能夠渲染出頁(yè)面易桃。也就是說(shuō)，當(dāng)訪問(wèn)/admin/about的時(shí)候模狭，服務(wù)器不能返回404颈抚。我們修改
<root>/app/router.js
const admin = require('./controller/admin');
module.exports = app => {
const { router } = app;
// 匹配所有/admin開頭的url
router.get('/admin(.*)', admin.admin);
};
/admin(.*) 代表所有訪問(wèn)以/admin開頭的url時(shí)，都會(huì)被admin這個(gè)controller處理嚼鹉。這樣就不會(huì)返回404了贩汉。
當(dāng)然，光是不反回404還是不夠的锚赤，我們需要react根據(jù)url渲染出對(duì)應(yīng)的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;
上面代碼關(guān)鍵點(diǎn)在于給StaticRouter傳入了一個(gè)context.url，但是目前為止线脚，我們還沒(méi)有再服務(wù)端傳入這個(gè)屬性赐稽，所有需要修改
<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;
}
}
};
目前為止叫榕，路由就加上了，執(zhí)行命令
npm run build && npm run start
在瀏覽器輸入http://localhost:3000/admin應(yīng)該能看到
輸入http://localhost:3000/admin/about應(yīng)該能看到
項(xiàng)目地址：https://github.com/leitc/isomorphic-react/tree/0.2
