8. What about Router / router 怎么办
最后更新于：2022-04-01 05:02:14
建议使用 isomorphic router，就是 browser 与 node 都可以用的 router
## 8.1 [direactor](https://github.com/flatiron/director)
非常轻量级的通用 router，并不是专门为 react 准备的，但是 router 而已，为毛要跟 component 耦合。
### client side
~~~
var routes = {
'/author': ()=>React.render(<Author/>, domNode),
'/author/:id': (id)=>React.render(<Auther id={id}/>, domNode)
};
var router = Router(routes);
router.init();
~~~
### server side
只需要调用 router.dispatch 就好了, 而且 server 端的 react 需要 `renderToString`
~~~
var router = new director.http.Router({
'/author': {
get: function(){
this.res.end(React.renderToString(<Author/>))
}
}
});
var server = http.createServer(function (req, res) {
router.dispatch(req, res, function (err) {
res.writeHead(200, { 'Content-Type': 'text/html' })
if (err) {
res.writeHead(404);
res.end();
}
});
});
~~~
## 8.2 [react router](https://github.com/rackt/react-router)
非常 **非轻量级** 的 router，而且只能给 react component用。
概念上就是使用 Route 把你的 Component 包起来，让 router 决定到底哪个 componet 上
~~~
render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
~~~