React Router

1.安装路由

$ yarn add react-router-dom

 <Switch>
     <Redirect from = "/" to = "/home" exact/>
     <Route path = "/home" component = { Home }/>
     <Route path = "/recommend" component = { Recommend }/>
     <Route path = "/category" component = { Category }/>     
     <Route  component = { NotFound }/> 
 </Switch>

2.Route 路由配置组件

• path:路由路径
• component:路由对应的组件,函数
• render:返回一个jsx结构,可以渲染一个组件,函数
• children:子组件
  ! component / render /children 选一个使用

• component vs render vs children
  1. 使用了Route并使用了component属性之后，我们的组件称之为路由组件，有路由属性【 history/location/match 】
  2. 使用render的话，我们发现组件的路由属性是没有的，但是我们可以给我们的组件绑定数据了
  3. 使用children的话，我们不仅可以绑定数据，也可以有路由属性

只有使用了Route的组件身上才有路由属性

• history
• location
• match
• 具有以上属性的组件我们称之为路由组件

3.Switch作用

• 一次只渲染一个组件
• 可以实现类似按需加载组件的作用，可以起到一定的性能优化作用
• Switch的作用是可以延续到二级路由中的

4.Redirect 重定向组件

• from 当前路径
• to 目标路径
• exact 它表示路径完全匹配

5.Link / NavLink

• react-router-dom中导航跳转的组件给了两个
  • Link 用于页面跳转，但是导航不激活
  • NavLink 用于页面跳转，但是导航激活
  • Link / NavLink
    • to Object/String
    • NavLink有一个activeClassName属性

React 二级路由

• 在你的以及路由对应的组件中写入导航和路由展示区域就行了

 <MineContainer>
    Mine
    {/* login/register导航 */}
    <NavLink to = "/mine/login"> 登录 </NavLink>
    <NavLink to = "/mine/register"> 注册 </NavLink>
    {/* login/register 展示区域 */}
    <Route path = "/mine/login" component = { Login } />
    <Route path = "/mine/register" component = { Register } />
</MineContainer>