建議使用 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) ~~~