react-router4.0之后路由定义的改变

在4.0版本之前，路由的定义是在src/router.js中定义嵌套路由。代码如下：

<Router history={history}>
      <Route path="/" component={IndexPage} >
          <Route path='/a' component={a} />
          <Route path='/b' component={b} />
      </Route>
</Router>

此时会报错，You should not use and in the same route, route children will be ignored.(大概是这么写的，意思就是route里不能嵌套子路由了)

在4.0中，router.js定义了根路由组件后，它的子路由，要在根组件中去定义。
比如一个单页面应用，首页带侧边栏，跳转路由只刷新content内的内容，此时：
1.首页IndexPage组件的路由要定义在router.js中
2.IndexPage组件中，布局会划分几部分，其中会有SideBar或TopBar这些菜单之类的组件，还有一部分是content
3.在content标签内，使用Route组件

<Layout>
    <TopBar></TopBar>
    <Layout>
      <SideBar></SideBar>
      <Layout style={{ padding: '0 24px 24px' }}>
          <Content style={{  paddingTop: 18, margin: 0, minHeight: 900 }}>
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/linetwo" component={Linetwo} />
          </Content>
      </Layout>
    </Layout>
</Layout>

4.SideBar中使用Link组件实现跳转。

总结：大页面内小页面的路由跳转。
react-router4.0以前：在src/router.js定义路由嵌套。
react-router4.0以后：在src/router.js定义大页面的路由，在大页面的展示内容的区域（就是要刷新页面的标签内）使用Route标签去引入跳转路由后要引入的组件

<div>
    <Route path='***' component={***} />
</div>

———————–更新—————————————————
路由重定向，Redirect组件，直接使用的时候会报警告：You tried to redirect to the same route
只需要把几个Route组件用Switch包住就可以解决了