React路由的使用

1.安装React

npm i react-router-dom@5.0 -S

2.react路由组件

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

导入路由相关的组件

 注释

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

router 存放路由的容器

navlink 导航链接

Redirect 重定向

Switch一次匹配一个页面

3.路由实例

给大家写一个最基本的路由实例

import {
  HashRouter as Router,
  Route,
  NavLink
} from "react-router-dom";
function App() {
  return (
    <Router>
      <div className="nav">
        <NavLink to="/" exact>首页</NavLink>|
        <NavLink to="/about">关于页面</NavLink>
      </div>
      <div className="views">
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
      </div>
    </Router>
  );
}
 
export default App;
 
function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  );
}
 
function About() {
  return (
    <div>
      <h1>关于页面</h1>
    </div>
  );
}

运行效果图

 4.路由的传参

 

<NavLink to={{

          pathname:"/details/abc",

          search:"name=mumu&age=18",

          hash:"good",

          state:{reidrect:"/about"}

        }}>详情abc</NavLink>

match 是匹配的路由参数

path 路径

url  地址

isExact是否精确匹配

params 路由的参数

获取参数

 

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>);

}

 效果图如下

 5.子路由

就是在父组件中配置子路由

function Admin(){

  return <div>

    <h1>Admin页面</h1>

    <p><NavLink to="/admin/dash">概览</NavLink> |<NavLink to="/admin/orderlist">订单列表</NavLink> </p>

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

    <Route path="/admin/orderlist" component={OrderList}></Route>

    <Redirect from='/admin' to="/admin/dash"></Redirect>

  </div>

}

 

6.路由守卫 

 

function Private({children,...rest}){

  // 把Private组件的参数除了children全部转移到Route组件

  // Route不直接指定component通过render渲染出来

   return <Route {...rest} render={

     ({location})=>{

      // 如果获取本地存储的isLog得到了（登陆了），返回children 子节点Admin 否则 返回一个Redirect组件

      // Redirect 默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)

       return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>

     }

   }></Route>

}

 然后给需要路由守卫的页面加上

<Private path="/admin">

                <Admin></Admin>

            </Private>

 就可以实现路由守卫了

 7.404页面

 

 {/*    * 号     匹配任意路径 */}

            <Route path="*" component={NoMatch}></Route>

function NoMatch({location}){

  return (<div>

    <h3>404</h3>

    <p>当前地址找不到: {location.pathname}</p>

    <NavLink to="/">首页</NavLink>

  </div>)

}

 效果图如下