React路由

React 路由

一、在React中使用react-router-dom路由

• 安装

  npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
  

• 引入

  import { BrowserRouter as Router, Route, Switch, NavLink, Redirect } from 'react-router-dom';
  

  • BrowserRouter :H5提供的的 history 模式，我们称之为 BrowserRouter

  • Route:Route代表了你的路由界面，path代表路径，component代表路径所对应的界面

  • Router:Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。

  • Switch:表示只渲染一个路径

  • NavLink:会在匹配上当前的url的时候给已经渲染的元素添加参数

  • Redirect:重定向

二、使用

• 申明式导航

<Router>
      <div className='manager-center'>
        <div className='title'>管理中心</div>
        <div className='base'>
          <div className='caidan'>
            <NavLink to='/list'>列表</NavLink>
            <div className='user-base'>
              <NavLink to='/user'>用户</NavLink>
              <div>
                <NavLink to='/user/register'>注册</NavLink>
              </div>
            </div>
          </div>
          <div className='content'>
            <Switch>
              //exact精准匹配
              <Route exact path='/list' component={List}></Route>
              <Route path='/user' component={User}></Route>
            </Switch>
          </div>
        </div>
      </div>
    </Router>

• 编程式导航

 this.props.history.push('/index'); 

三、动态路由传参

• 动态路由传参： 通过match.params获取参数

路由页面：<Route path='/demo/:id' component={Demo}></Route>  //注意要配置 /:id
路由跳转并传递参数：
    链接方式：<Link to={'/demo/'+'6'}>XX</Link>
        或：<Link to={{pathname:'/demo/'+'6'}}>XX</Link>

    js方式：this.props.history.push('/demo/'+'6')  
        或：this.props.history.push({pathname:'/demo/'+'6'})
获取参数：this.props.match.params.id    //注意这里是match而非history

• params传参(多个动态参数)

state={
    id:88,
    name:'Jack',
}
路由页面：<Route path='/demo/:id/:name' component={Demo}></Route>  
路由跳转并传递参数：
    链接方式：<Link to={{pathname:`/demo/${this.state.id}/${this.state.name}`}}>XX</Link>

    js方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})
获取参数：this.props.match.params     //结果 {id: "88", name: "Jack"}

• query传参(刷新页面后参数消失)

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
路由跳转并传递参数：
    链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
    js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})
获取参数： this.props.location.query.name

• state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置
路由跳转并传递参数：
    链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link> 
    js方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})
获取参数： this.props.location.state.name