React Hook第七篇----React路由(详细篇)

首发:CSDN碰磕，学无止境

---

小雨

---

✊✊You can`t have a better tomorrow if you don-t stop thinking about yesterday.

---

2022/6/18

---

React中的路由

在React快速入门的文章中其实已经讲过了，但写的不是特别细，这里再发表一篇详细了解
路由6版本中新增的新特性

路由V6特性

<Switch>重命名为<Routes>

component/render被element替代

默认显示路由添加index属性，默认为true

Redirect 组件取消 变为 Navigate

使用useNavigate替代了useHistory

v6移出了WithRouter，添加了一些新的hooks

使用`useRoutes`替代了v5的`react-router-config`

新API:Outlet

安装引入

这里路由讲解的是v6以上版本的，所以安装时注意版本

npm i react-router-dom

//引入
import {BrowserRouter,Route, Routes} from 'react-router-dom';

一级路由与多级路由

语法:

path是跳转路径,element是展示的组件内容（6版本以上）

<BrowserRouter>
           <Routes>
           	<Route path='/路径1' element={组件标签}></Route>
           	<Route path='/路径2' element={组件标签}></Route>
           </Routes>
</BrowserRouter>

重定向

exact精确匹配

//6版本以下
<Redirect from="/" to="/center" exact />

6版本以上需要引入Navigate实现重定向

//6版本以上
import {BrowserRouter,Route, Routes,Navigate} from 'react-router-dom';
<Route path="/" element={<Navigate to ="/center" />}/>

配置404页面拦截

通过*表示只要上方路径都不对，则进入NotFound组件页面

<Route path='*' element={<NotFound/>} />

嵌套路由

Route套Route

<BrowserRouter>
           <Routes>
               <Route path='/center' element={<Center></Center>}>
               <Route path='child' element={<Child />}></Route>
           	   </Route>
           </Routes>
</BrowserRouter>

导航

• 声明式导航
• 编程式导航

声明式导航

使用关键字:NavLink,该关键词能得到点击时的标签，并且默认添加class=“active”

注:这里导航需要放到BrowserRouter中，所以这里我通过插槽实现部署到路由BrowserRouter中…

//主页采用插槽
<MRouter>
          <Tabbar></Tabbar>
</MRouter>


//第二个文件路由
 <BrowserRouter>
         {this.props.children}
           <Routes>
               <Route path='/films' element={<Films></Films>}></Route>
               <Route path='/cinemas' element={<Cinemas></Cinemas>}></Route>
               <Route path='/center' element={<Center></Center>}>
                 <Route path='child' element={<Child />}></Route>
               </Route>
               {/*  旧版重定向*/}
               <Route path='/' element={<Navigate to ="/center" />}  />//首页
               <Route path='*' element={<NotFound/>} /> /*404页*/
           </Routes>
           </BrowserRouter>

	/**
 * 导航组件
 */
 import React from 'react';
import { Link,NavLink } from 'react-router-dom';
import '../css/Tabbar.css'
 function Tabbar(){
     return (
         <div>
            <ul>
                {/**声明式导航 */}  
                <li><NavLink to='/films'>影片</NavLink></li>
                <li><NavLink to='/cinemas'>电影院</NavLink></li>
                <li><NavLink to='/center'>我的中心</NavLink></li>
            </ul>
         </div>
     ); 
 }
 export default Tabbar

编程式导航

• 原生js(window.location.href)
• 老版本(this,props.history.push)
• v6版本以上(使用useNavigate)

import React from 'react';
import {useNavigate} from 'react-router-dom';
function Films(){
    const navigate = useNavigate()
    return (
        <div>
            Films
            <b onClick={goto404=>{
                // window.location.href="/404";//原生js
                // props.history.push("/404")//老版本写法
                navigate("/404")
            }}>去404页(编程式导航)</b>
        </div>
    );
}

export default Films

路由传参

方式1(路径传参)

navigate(`/home/message/detail/${id}/${title}`)

获取数据:函数组件会接收到props
参数在params中

props.match.params.参数名
//这样就拿到传来的数据了

方式2(state传参)

navigate(`/home/message/detail`,{state:{name:'碰磕',age:111},replace:true})

//组件“//home/message/detail”为已经定义好的路由,state负责传值state:{参数:值}

参数在query中

props.match.query.参数名
//这样就拿到传来的数据了

路由拦截

常用于部分页面需要部分权限访问时进行判断拦截

写法

<Route path='/cinemas' element={<RequireAuth> // 拦截组件
            <Cinemas /> // 被拦截组件
          </RequireAuth>}></Route>

RequireAuth为拦截的函数
Cinemas时需要拦截的组件

function RequireAuth({ children }) {
  const authed = "true"
  return authed === 'true' ? ( // 判断 localstorage 中登录状态是否为 true
    children
  ) : (
    <Navigate to="/center" replace /> // 跳转到登录
  );
}

里边进行逻辑判断，正确则返回传进来的要跳转的组件标签，反之跳转到另一个页面…

这样就学会了路由了~够详细不，不够再写