React路由的使用

一、安装

npm i react-router-dom@5.0

安装react5.0版本

二、导入

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

1. 导入路由相关的组件

2. HashRouter哈希路由 as起别名 router路由

3. router 存放路由的容器

4. Navlink 导航链接

三、一般路由使用

大家可以尝试一下哦！可以看看和vue路由的区别

四、路由的传参

import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;

//创建详情页
function Details({match,location}){
  return (<div>
      <h1>详情内容</h1>
      <p>参数：{match.params.id}</p>
      <p>match:{JSON.stringify(match)}</p>
      <p>location:{JSON.stringify(location)}</p>
  </div>);

五、子路由

<NavLink to="/admin/dash">
<Route path="/admin/dash" component={Dash}>

六、404页面 

当无其他匹配页面时就显示404页面

<Switch>
    <Route path="/" component={Home} exact></Route>
    <Route path="/about" component={About}></Route>
    {/*匹配任意路径*/}
    <Route path="*" component={NoMatch}></Route>
</Switch>

//404页面
function NoMatch({ location }) {
    return (<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to="/">首页</NavLink>
    </div>)
}

七、路由守卫 

function Login({location,history}){
  function logIt(){
      // 存储到本地
      localStorage.setItem("isLog",true);
      // 获取redirect信息
      var redirect = location.state.redirect||"/";
      // 如果没有拿到就跳转到首页
      history.push(redirect);
  }
   return<div>
    <h1>登录</h1>
    <button onClick={logIt}>登录</button>
  </div>
  }