# React router 实践

# 最佳实践

# 如何组织组件使得可以公用一个导航栏

嵌套的路由对应的展示组件可以作为被嵌套路由对应组件的子组件。看到这里我就有了更好的解决方案，在配置应用路由时，让MainLayout作为根路由，所有路由都作为它的子路由。

render(){
  return (
    <Router history={history}>
      <Route path="/" component={MainLayout}>
        <IndexRoute component={Home}/>
          <Route path="/dataSource/list" component={DataSourceList} />
          <Route path="/dataSource/create" component={QueryForm} />
        </Route>
    </Router>
  );
}

在MainLayout的组建中，加入自己的样式，然后写一个this.props.children即可

# 问题

# 1.使用react-router的browserHistory配置路由历史记录时刷新或者单独打开一个页面时出现NOT FOUND

react-router有三种记录路由历史记录的方式：hashHistory、browserHistory和createMemoryHistory。

简单说一下browserHistory，他是根据HTML5的history API来实现的，基于浏览器浏览记录来实现路由的。它会新创建一个浏览器浏览记录形式的路由URL。

react-router官方推荐browserHistory作为路由的历史记录，原因主要是：

browserHistory可以支持服务端渲染，hashHistory却不能
browserHistory能够有一个更干净的URL环境

但是browserHistory在某个指定的路由刷新或者新打开时，会出现not found的情况，原因如下：

由于是单页面应用，而browserHistory是基于浏览器浏览记录来进行路由的，你刷新一个页面或者导航到某个页面的路由时，相当于新打开了一个单页应用，而要刷新或者要打开的页面是这个单页应用的第一个页面，这时这个新的单页应用还没有浏览记录，所以出现not found情况。

解决这种情况就需要进行服务端改造，具体有两种方法，详情请猛戳服务端改造 (opens new window)

服务端改造例子：使用express.js

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

可以参考：http://cn.redux.js.org/docs/advanced/UsageWithReactRouter.html

← React Router 基础 React router 测试 →