React-Router(V6版本)

前言

V6版本官方文档

安装

安装react-router和eact-router-dom

npm i  react-router-dom -s

使用

小案例

对index.js文件添加一部分代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";

import Home from './views/Home'
const router = createBrowserRouter([       // 路由的配置对象，类似于vue
    {
        path: "/",
        element: <div>Hello world!</div>,
    },
    {
        path: '/home',
        element: <Home></Home>
    }
]);

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <RouterProvider router={router}/>
    </React.StrictMode>
);
reportWebVitals();

这样的话，就可以点击页面上的链接或在地址栏进行输入地址，可以切换不同组件
遇见的问题：
最好在index.js渲染App组件时，在那里包括比较不容易出错

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
);

BrowserRouter和 HashRouter

一个react只用一次，包裹整个应用

BrowserRouter

使用h5的history.pushState API 实现 （http://localhost:8000/home）
一般使用这个

HashRouter

使用URL的哈希值实现（http://localhost:8000/#/home）

编程式导航

通过 js 编程的方式进行路由页面跳转

1. 导入usenavigate 钩子函数
2. 执行钩子函数得到跳转函数
3. 执行跳转函数完成跳转

函数式组件编程式导航

// 导入useNavigate
import {useNavigate} from "react-router";

function Login() {
    // 执行useNavigate()的得到一个跳转函数
    const Navigate = useNavigate()
    function goTo() {
        // 调用跳转函数传入目标路径
        Navigate('/home')
       // Navigate('/home',{replace:true}) 可以配置额外得参数replace为true，
       //表示不想加历史记录
       // Navigate('/home',{replace:true},state:{id:"001"}) 也可以传递state参数 
    }
    return (
        <div>
            <h1>这是login</h1>
            <button onClick={goTo}>跳转到home</button>
        </div>
    )
}

export default Login

类式组件编程导航

跳转传参（编程式）

SearchParams

/home?id=1001&name="tom"&gender="男"

函数式组件

传参

 Navigate('/home?id=1001')

取参

import React from 'react';
import {useSearchParams} from "react-router-dom";

function Home() {
    const [params] = useSearchParams()
    // params 是一个对象 对象里有一个get的方法
    // 用来获取对应的参数
    // 把参数的名称作为get的实参传过来
    let id = params.get('id')
    return (
        <div>
            这是首页,得到的参数id为:{id}
        </div>
    )
}

Params

使用

/home/id=1001

函数式组件

跳转路由

Navigate('/home/id=1001')

与之对应的路由配置

<Route path="/home/:id" element={<Home/>}/>

取参

import React from 'react';
import {useParams} from "react-router-dom";
function Home() {
    const params = useParams()
    let id = params.id
    return (
        <div>
            这是首页,得到的参数id为:{id}
        </div>
    )
}
export default Home;

state

函数式组件

传参

<Link
     to="/play"
     state={{
     	id:"001",
     	title:"标题",
     	gen:"不错"
     }}
>播放页</Link>

接收参数

import React from 'react';
import {useLocation} from "react-router";

function Play() {
    const state = useLocation()
    console.log(state)
    return (
        <div>
            这是播放页
        </div>
    )
}

export default Play;

嵌套路由

配置home的二级路由

 <Routes>
     {/*指定路径和组件的对应关系，path代表路径 element代表组件 成对出现
     path -> element*/} 			
     <Route path="/" element={<Play/>}></Route>
     	<Route path="/home" element={<Home/>}>
        {/*Home的二级路由*/}
          	 {/*默认渲染的二级路由，添加一个index属性，path去掉*/}
             <Route index element={<HomeA/>}/>  
             <Route path="/home/a" element={<HomeA/>}/>
             <Route path="/home/b" element={<HomeB/>}/>
        </Route>
    <Route path="/play" element={<Play/>}/>
    <Route path="/songList" element={<SongList/>}/>
    <Route path="/login" element={<Login/>}/>
</Routes>

在home.jsx中

import {Outlet} from "react-router";
function Home() {
    return (
        <div>
            啦啦啦啦
            {/*二级路由出口位置*/}
            <Outlet></Outlet>
        </div>
    )
}
export default Home;

路由表

路由过多的时候我们可以拆分成一个个路由表
如上述

<Routes>
      <Route path="/" element={<Play/>}></Route>
      <Route path="/home" element={<Home/>}>
      {/*Home的二级路由*/}
         <Route index element={<HomeA/>}/>
         <Route path="/home/a" element={<HomeA/>}/>
         <Route path="/home/b" element={<HomeB/>}/>
      </Route>
      <Route path="/play" element={<Play/>}/>
      <Route path="/songList" element={<SongList/>}/>
      <Route path="/login" element={<Login/>}/>
      {/*兜底，如果上面的都匹配不到，就会渲染NotFound组件*/}
      <Route path="*" element={<Login/>}/>
</Routes>

可以把这部分抽离出来，新建一个路由js文件。类似于Vue的 router-view

import Play from '../components/play'
import Home from "../components/home";
import HomeA from "../components/home/HomeA";
import HomeB from "../components/home/HomeB";
import {Navigate} from "react-router";
import SongList from "../components/songList";
import Login from "../components/login";

const routes =  [
    {
        path: '/',
        element: <Play/>
    },
    {
        path: '/home',
        element: <Home/>,
        children: [
            {
                path:'a',
                element:<HomeA/>
            },
            {
                path:'b',
                element: <HomeB/>
            },
            {
                path:'',
                element: <Navigate to="/home/b"/>
            }
        ]
    },
    {
      path:'/play',
      element: <Play/>
    },
    {
        path:'/songList',
        element: <SongList/>
    },
    {
        path:'/login',
        element: <Login/>
    }
]
export default routes

使用路由表

import './App.css';
//使用useRoutes构建路由
import { BrowserRouter, useRoutes } from 'react-router-dom';
import routers from './router/index';

function App() {
  //使用 useRoutes
  const GetRoutes = () => useRoutes(routers);
  return (
    <div className="App">
      <BrowserRouter>
        <GetRoutes></GetRoutes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Router的核心概念

路由器组件

• BrowserRouter
  使用干净的URL将当前位置存储在浏览器的地址栏中，并使用浏览器的内置历史记录堆栈进行导航。
  • basename
    在特定位置上进行运行, 如/app下运行。

        <BrowerRouter basename='/app'></BrowerRouter>
    

  • future
  • window
• HashRouter

Route

Route里面有很多可以配置的东西
-path

- action
- errorElement
    错误元素，当在loader、actions或组件渲染抛出异常时起作用。
- lazy
- loader
- shouldRevalidate

钩子

• useRoutes
  该钩子的功能相当于<Routes>,但是它使用JavaScript对象不是<Route>元素来定义路由。
  <Route>这些对象具有与普通元素相同的属性，但是他们不需要JSX。
  我们利用该属性可以做抽离路由成路由表（类似于Vue的路由表）

Router如何进行验证操作？

Routes原理分析

新版本(V6)的Route,对于路由更新、到路由匹配，再到真正的页面组件，这些逻辑主要交给了Routes,而且加了一个branch（分支）的概念。可以把它理解成一个树状的概念。

history

推荐文章