建议使用 isomorphic router,就是 browser 与 node 都可以用的 router

8.1 direactor

非常轻量级的通用 router,并不是专门为 react 准备的,但是 router 而已,为毛要跟 component 耦合。

client side

  1. var routes = {
  2. '/author': ()=>React.render(<Author/>, domNode),
  3. '/author/:id': (id)=>React.render(<Auther id={id}/>, domNode)
  4. };
  5. var router = Router(routes);
  6. router.init();

server side

只需要调用 router.dispatch 就好了, 而且 server 端的 react 需要 renderToString

  1. var router = new director.http.Router({
  2. '/author': {
  3. get: function(){
  4. this.res.end(React.renderToString(<Author/>))
  5. }
  6. }
  7. });
  8. var server = http.createServer(function (req, res) {
  9. router.dispatch(req, res, function (err) {
  10. res.writeHead(200, { 'Content-Type': 'text/html' })
  11. if (err) {
  12. res.writeHead(404);
  13. res.end();
  14. }
  15. });
  16. });

8.2 react router

非常 非轻量级 的 router,而且只能给 react component用。

概念上就是使用 Route 把你的 Component 包起来,让 router 决定到底哪个 componet 上

  1. render((
  2. <Router>
  3. <Route path="/" component={App}>
  4. <Route path="about" component={About}/>
  5. <Route path="users" component={Users}>
  6. <Route path="/user/:userId" component={User}/>
  7. </Route>
  8. <Route path="*" component={NoMatch}/>
  9. </Route>
  10. </Router>
  11. ), document.body)