react-router-dom的使用

=> github上的文档

react-router-dom的使用

首先下载  ## 注意下的是react-router-dom 而不是 react-router

npm install react-router-dom

yarn add react-router-dom

 路由有两种形式 :

1.BrowserRouter 是histroy模式

2.hashRouter是hash模式 

由于BrowserRouter看起来更正规 所以下面拿BrowserRouter来举例子，其实两者使用方式差不多， 下面引入的是histroy模式

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

可直接在项目的index.js中引入router，包裹住根实例，这样根实例就有了一些路由的属性和方法

// index.js

// 根实例渲染
ReactDOM.render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById('root'));

 在配置路由组件时有两种写法

1.componnet直接写一个组件

2.render返回一个组件

exact表示完全匹配

<Route path = '/active/:id'  component = {Active} />
 <Route path = '/' exact render = {()=>{
            return <Redirect to = '/todoList' />
          }} />

react-router 给我们提供了两种导航:

1.Link 无论在哪里使用都会把当前的标签渲染成a标签 href指向to属性的位置

2.NavLink  是一种特殊类型的<Link>，当它的to prop匹配当前位置时，它可以给自己生成“active”的类名。同时也可以用activeClassName来自定义类名。从而可以自定义样式。

两个标签都默认渲染成a标签 如果想像Vue一样生成指定标签 可以看我的另一篇博客 实现tag重置标

<Link  to = '/todoList'>TodoList</Link>  
<NavLink activeClassName = 'ok' to = '/user'>User</NavLink>

 路由参数的传递 都在跳转的时候传参数

1.params 需要在路由中做配置 <Route path = '/active/:id' component = {Active} />  用match.params.id取到

2.query 无需做配置 

用location.search 取得

<NavLink   to = {{pathname : '/active/6199',search : '?'+ qs.stringify(query)} } >Active</NavLink>

3.state参数  

定义路由：<Route path='/user' component={UserPage}></Route>(无需做多余的配置)

var data = {id:3,name:sam,age:36};

var path = { pathname:'/user', state:data, }

使用1.<Link to={path}>用户</Link>

2.hashHistory.push(path);

获取数据 var data = this.props.location.state; var {id,name,age} = data;

注意: state传参不会显示在地址栏中，只保存在this.props中。刷新就会变成undefined

// 传参 qs是node.js的queryString模块
let query = { name: 'Alice', age: 16 }  
<NavLink toObj tag = 'li' to = {{pathname : '/active/6199',search : '?'+ qs.stringify(query)} } >Active</NavLink>

配置二级路由

switch表示只匹配第一次匹配到的一个路由，防止向下重复匹配

 <Route path = '/user' render = {({match})=>{  // 由于User 是一个路由组件 使用接收的参数是一个路由对象 有match history location
          // 做二级路由时 为了方便维护 应该把路径名换成变量
            return (
              <User>  // 在user组件中用this.props.children来接收
                <p>
                  type:
                  <ActiveNavLink to = {`${match.path}/my`}> my </ActiveNavLink>
                  <ActiveNavLink to = {`${match.path}/login`}> login </ActiveNavLink>
                </p>
              <Switch>    
                  {/* 配置二级路由时 使用switch 只匹配到1项 并给重定向加exact */}
                  <Redirect from = {`${match.path}`} exact to = {`${match.path}/my`} />

                  <Route  path = {`${match.path}/my`} render = {()=>{return (<h1>欢迎回来</h1>)}}/>
                  <Route path ={`${match.path}/login`} render = {()=>{return (<h1>还没有登录请登录</h1>)}}/>
              </Switch>
              </User>
            )
          }}/>