react-router4学习

近期学习了react相关知识，记录一下。

1.一般性使用

官方react-router 文档
https://reacttraining.com/react-router/web/example/basic

简单基本的用户在basic中已有比较好的介绍了。

如果要想让li标签根据当前路由显示不同的样式的话，需要用到NavLink,
在文档的列表中也有关于NavLink的API介绍 ，其中可以通过activeClassName
属性来设置路由触发的样式，也可以通过activeStyle来设置。

2.关于重定向

重定向需要使用Redirect组件来实现，对应文档中有相关介绍。

下面也是重定向比较常见的一种形式，在Router 组件的render属性中被调用。
需要注意的是：重定向需要写在最后，不然会发生报错。

<div>
      <HomeSearch/>
      <HomeNav data={initData} clickCallBack={this.clickHandler}/>

      <Route path={"/home"} component={HomeContent} />
      <Route path={"/channel/:type"} key={this.state.key} component={ContentRoute} />
      <Route exact path={"/"} render={()=><Redirect to={"/home"}/>}/>
</div>

3.传参

传参，如上图path={"/channel/:type"},
获取参数可以通过props.match来获取

4.路由跳转

自动跳转：路由跳转可以通过Link或NAVLink来实现
手动跳转：
引入import {withRouter} from 'react-router-dom'
在组件外围包一层withRouter，即export default withRouter(TestComponent)
然后在TestComponent通过调用this.props.history.push(/recommend/${item.dissid});进行跳转

注:withRouter(TestComponent) 如有看不懂，请查看高阶组件相关知识

5.结合react-router-config的使用

如果之前使用过vue-router这样的形式，也想react-router 有那样的路由配置管理，可以使用react-router-config这个包。
官方文档中的一个例子，如下，写一点注释
官方地址：https://www.npmjs.com/package/react-router-config

import { renderRoutes } from 'react-router-config'
 //路由配置，可单独写成一个文件
const routes = [
  { component: Root,
    routes: [
      { path: '/',
        exact: true,
        component: Home
      },
      { path: '/child/:id',
        component: Child,
        routes: [
          { path: '/child/:id/grand-child',
            component: GrandChild
          }
        ]
      }
    ]
  }
]
 
const Root = ({ route }) => (
  <div>
    <h1>Root</h1>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes)}
  </div>
)
 
const Home = ({ route }) => (
  <div>
    <h2>Home</h2>
  </div>
)
 
const Child = ({ route }) => (
  <div>
    <h2>Child</h2>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
  </div>
)
 
const GrandChild = ({ someProp }) => (
  <div>
    <h3>Grand Child</h3>
    <div>{someProp}</div>
  </div>
)
 
 //BrowserRouter 下只能有一个子元素，若有两个并列的子组件，可以先套一层div
ReactDOM.render((
  <BrowserRouter>
    {/* kick it all off with the root route */}
    {renderRoutes(routes)}
  </BrowserRouter>
), document.getElementById('root'))

如果要实现按需加载，可以使用react-loadable，使用方法请参考官方。