❤React体系11-React路由(ReactRouter)的初步使用

林太白
398 阅读4分钟

❤React体系11-React路由(ReactRouter)的初步使用

React Router 在 2021 年 11 月份的时候更新 v6 的版本，本次主要学习的也是v6，里面更改了很多新写法特性！

1、路由的认识

官网给他定义是一个库，不是一个框架。

React官方并没有提供路由库，路由插件,而是推荐我们使用React结合ReactRouter来进行路由的映射。

正常的路由开发模式分为以下三种：

  • 编程式路由：自己在页面中写代码进行路由编程，包括映射、路由引入。

  • 配置式路由：将路由映射写到配置文件中，剩下的就是自动渲染。

  • 约定式路由：无需配置路由，你的项目文件系统就是路由。（Next就是这种方式）

先来看看Vuejs配置式路由：

src/router/index.js
​
import VueRouter from "vue-router"
import Login from "./Login.vue"
​
const routes = [
  {
       path:"/login",
       name:"Login"
       component:Login
  }
]
const router = new VueRouter({
   routes,
   mode:"hash"
})
​
export default router

2、路由安装下载

下载React路由

yarn add react-router-dom

3、路由的使用

我们先在App.jsx 组件搭建路由（四个页面主要是后台首页、登陆页面、后台文章、后台用户）

App.jsx之中引入页面


import Home from '@/pages/Home';
import Login from '@/pages/Login';
import User from '@/pages/User';
import Article from '@/pages/Article';

App.jsx之中路由的引入和使用

import { BrowserRouter, Routes, Route } from "react-router-dom"

 <BrowserRouter>
      {/* 路由映射列表 */}
       <Routes>
        {/* 路由具体路径匹配 */}
         <Route path="/" element={<Home></Home>}></Route>
         <Route path="/login" element={<Login></Login>}></Route>
         <Route path="/user" element={<User></User>}></Route>
         <Route path="/article" element={<Article></Article>}></Route>
       </Routes>
</BrowserRouter>

4、路由详细说明：

路由大致认识

路由器目前有两种（：BrowserRouter、HashRouter），决定了当前路由的模式。

BrowserRouter：默认采用history模式

HashRouter：采用hash模式。路径访问的时候需要/#/

路由映射：Routes、Route主要负责进行路由路径匹配，提供渲染的组件

Routes：表示可以包含多个映射规则。从上到小的进行匹配。当匹配成功结束匹配

Route：进行路由映射，path路由路径，element提供映射组件。指定的这个地方渲染组件

路由导航：Link、NavLink

通过Link和NavLink组件可以实现路由的切换，类似于Vue之中的router-link进行对号入座！

路由映射规则

默认索引和重定向 需求：当我们点击进来以后首先进入的是我们的home主页面：index 的作用

默认进来匹配的组件就是Home组件。默认索引。index只能用一次

<Routes>
<Route path="/" index element={<Home></Home>}></Route>
</Routes>

重定向规则

javascript
复制代码
import {Navigate} from "react-router-dom"
​
<Routes>
<Route path="/" element={<Navigate to="/login"></Navigate>}></Route>
</Routes>

我们还可以用重定向解决404的问题

完整页面大致如下：

import AntdComp from "./components/AntdComp";
import Header from "./components/Header";
import Login from "./views/Login";
import Register from "./views/Register";
import ForgetPassword from "./views/ForgetPassword";
import { Button, ConfigProvider, Space } from 'antd';
import NotFind from "./views/NotFind";
import { BrowserRouter,HashRouter, Routes, Route,Link,NavLink,Navigate } from "react-router-dom"
function App() {
 return (
   <ConfigProvider
     theme={{
       token: {
         // Seed Token，影响范围大
         colorPrimary: '#7cb305'
      },
    }}
   >
    {/* 路由器 */}
     <BrowserRouter>
      {/* 路由映射列表 */}
       <ul>
         <li>
           <Link to="/register">注册</Link>
         </li>
         <li>
           <NavLink to="/forget">忘记密码</NavLink>
         </li>
       </ul>
       <Routes>
        {/* 路由具体路径匹配 */}
         <Route path="/" element={<Navigate to="/login"></Navigate>}></Route>
         <Route path="/login" element={<Login></Login>}></Route>
         <Route path="/register" element={<Register></Register>}></Route>
         <Route path="/forget" element={<ForgetPassword></ForgetPassword>}></Route>
         <Route path="/404" element={<NotFind></NotFind>}></Route>
         <Route path="*" element={<Navigate to="/404"></Navigate>}></Route>
       </Routes>
     </BrowserRouter>
   </ConfigProvider>
);
}
​
export default App;
​

5、路由组件的封装

根组件下面新建文件夹router=>index.tsx ，这个文件夹下面就专门负责我们的路由

接下来我们把路由给拿出来单独放到一文件夹里面

image.png

import { lazy } from 'react'; //lazy懒加载
import { BrowserRouter, Routes, Route } from 'react-router-dom';


import Home from '@/pages/Home';
import Login from '@/pages/Login';
import User from '@/pages/User';
import Article from '@/pages/Article';

function getRouter() {
  return <>
    <BrowserRouter>
      {/* 路由映射列表 */}
      <Routes>
        {/* 路由具体路径匹配 */}
        <Route path="/" index element={<Home></Home>}></Route>
        <Route path="/login" element={<Login></Login>}></Route>
        <Route path="/user" element={<User></User>}></Route>
        <Route path="/article" element={<Article></Article>}></Route>
      </Routes>
    </BrowserRouter></>
}
export default getRouter

6、重定向路由redirect(Navigate)

接下来我们输入http://localhost:3000/a 却发现一片空白，那么我们想要输入不匹配的直接跳转到我们的首页应该如何做呢

先看看之前v5版本的重定向如何做的

image.png

在我们访问'/' 的时候直接就重定向到了‘/filems’ 这个路由

在这里确实遇到了坑，就是写的完全一样，但是就是不生效，前端瞬息万变，强烈建议有些东西看看会了就行，记住了也没啥用，最重要的就是理解并且会查阅相关的文档，这里新版本的v6写法已经变成了下面这样子：（含义就是高改变了以后 v6 中的重定向更加简洁和直观）

主要是利用其中的Navigate 进行冲定向

import { BrowserRouter as Router, Routes, Route ,Navigate} from 'react-router-dom';


{/* 假设需要在某个条件下进行重定向 */}
<Route path="/article" element={<Navigate to="/new-url" />} />

{/* 或者根据条件返回一个 Navigate 组件 */}
<Route path="/another-old-url" element={<User></User>} />

{/* 其他路由 */}
<Route path="/new-url" element={<User></User>} />

所以当我们访问/article 会自动重新定向去 /new-url 地址，展示User组件 image.png

7、404 界面

当我们找不到未匹配的路径的时候，我们现在的页面一片空白，接下来我们想找不到页面的时候去我们的404界面，应该怎么做呢

新建一个NotFind.tsx 界面，这里也是巧妙的利用我们的Navigate的功能

<Route path="/404" element={<NotFind></NotFind>}></Route>
<Route path="*" element={<Navigate to="/404"></Navigate>}>

访问http://localhost:3000/8888地址，自动重定向到了我们的404界面

image.png

avatar
文章
阅读
粉丝