React Router v6详解

缺乏、安全感 2024-03-26 15:46 61阅读 0赞

### 旧版本React Router使用方式 ###

*  BrowserRouter：通过 history 库，传递 history 对象，location 对象
 *  Switch：匹配唯一的路由 Route，展示正确的路由组件
 *  Route：视图承载容器，控制渲染 UI 组件

### 新版本React Router使用方式 ###

#### 新版本特点 ####

*  提供了`useNagivate`实现路由跳转
 *  新版本移除了`<Switch>`组件，新增`<Routes>`，旧版本的Route可以独立使用，新版本的Route必须和Routes配合使用
 *  语法的变化：component=\{About\} 变为 element=\{\}
 *  新增多个hook：useParams、useNavigate、useMatch
 *  新版本引入Outlet占位功能，可以更方便的配置路由结构

#### 组件使用说明 ####

##### 1 `<BrowserRouter>` #####

`<BrowserRouter>`用于包裹整个应用，在路由的最外层，示例代码：

import React from "react";
    import ReactDOM from "react-dom";
    import {
         BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(
      <BrowserRouter>
        {
        /* 整体结构（通常为App组件） */}
      </BrowserRouter>,root
    );

> 说明：BrowserRouter和HashRouter都可以实现前端路由的功能，HashRouter在路径中包含了\#，相当于HTML的锚点定位。而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。

##### 2 `<HashRouter>` #####

作用与`<BrowserRouter>`一样，但`<HashRouter>`修改的是地址栏的hash值。

##### 3 `<Routes />`与`<Route />` #####

*  V6版本移除了`<Switch>`，使用`<Routes>`代替，`<Routes>` 和 `<Route>`要配合使用：用`<Routes>`包裹`<Route>`。
 *  当URL发生变化时，`<Routes>`都会查看其所有子`<Route>`元素以找到最佳匹配并呈现组件 。
 *  `<Route>` 也可以嵌套使用，且可配合`useRoutes()`配置 “路由表” ，但需要通过 `<Outlet>` 组件来渲染其子路由。

举个栗子：

<Routes>
        <Route path="/login" element={
        <Login />}></Route>
        
        // 嵌套路由，home是一级路由
        <Route path="/home" element={
        <Home />}>
          <Route path="test1" element={
        <Test/>}></Route>
          <Route path="test2" element={
        <Test2/>}></Route>
    	</Route>
    	
    	//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
        <Route path="users">
           <Route path="xxx" element={
        <Demo />} />
        </Route>
    </Routes>

##### 4 `<Link>`和`<NavLink>` #####

`<Link>`的作用是修改URL，且不发送网络请求。`<NavLink>`的作用类似，不过被点击的`<NavLink>`的css样式会自动添加`active`类，用于实现导航栏高亮效果。示例代码：

import {
         Link, NavLink } from "react-router-dom";
    
    function Menu() {
        
      return (
        <div>
        	<Link to="/home">首页</Link>
        	<NavLink to="/about">关于</NavLink>
        </div>
      );
    }

> 注意：`<Link>`的外侧需要用`<BrowserRouter>`或`<HashRouter>`包裹。

##### 5 `<Navigate>` #####

只要`<Navigate>`组件被渲染，就会修改路径，切换视图。示例代码：

import React,{
        useState} from 'react'
    import {
        Navigate} from 'react-router-dom'
    
    export default function Home() {
        
    	const [sum,setSum] = useState(1)
    	return (
    		<div>
    			<h3>我是Home的内容</h3>
    			{
        /* 根据sum的值决定是否切换视图 */}
    			{
        sum === 1 ? <h4>sum的值为{
        sum}</h4> : <Navigate to="/about" replace={
        true}/>}
    			<button onClick={
        ()=>setSum(2)}>点我将sum变为2</button>
    		</div>
    	)
    }

##### 6 `<Outlet>` #####

当`<Route>`产生嵌套时，渲染其对应的后续子路由，类似Vue中的`<router-view></router-view>`。

#### Hooks使用说明 ####

##### 1 useRoutes() #####

作用是根据路由表动态生成`<Routes>`和`<Route>`，该钩子函数的参数是JSON形式的路由配置数据（见下面的示例），返回的内容类等价于一个`<Routes>`， 上示例代码：

//路由表配置：src/routes/index.js
    import About from '../pages/About'
    import Home from '../pages/Home'
    import {
        Navigate} from 'react-router-dom'
    
    export default [
    	{
        
    		path:'/',
    		element:<Navigate to="/home"/>
    	},
    	{
        
    		path:'/home',
    		element:<Home/>
    	},
    	{
        
    		path:'/about',
    		element:<About/>
    	}
    ]
    
    //App.jsx
    import React from 'react'
    import {
         NavLink,useRoutes } from 'react-router-dom'
    import routes from './routes'
    
    export default function App() {
        
    	//根据路由表生成对应的路由规则
    	const element = useRoutes(routes)
    	return (
    		<div>{
        element}</div>
    	)
    }

> 说明：如果使用了`useRoutes()`，仍需要在最外层使用`<HashRouter>`或`<BrowserRouter>`包裹。

##### 2 useNavigate() #####

作用是返回一个函数用来实现编程式导航（使用js/ts代码控制导航）。示例代码：

import React from 'react'
    import {
         useNavigate } from 'react-router-dom'
    
    export default function Demo() {
        
      const navigate = useNavigate()
      const handleClick = () => {
        
        navigate('/home'); 
      }
      
      return (
        <div>
          <button onClick={
        handleClick}>按钮</button>
        </div>
      )
    }

#### Routers使用说明 ####

##### 1 createBrowserRouter #####

这个函数用于创建`<BrowserRouter>`，输入Array类型的路由配置数据。

import * as React from "react";
    import * as ReactDOM from "react-dom";
    import {
        
      createBrowserRouter,
      RouterProvider,
    } from "react-router-dom";
    
    import Root, {
         rootLoader } from "./routes/root";
    import Team, {
         teamLoader } from "./routes/team";
    
    const router = createBrowserRouter([
      {
        
        path: "/",
        element: <Root />,
        loader: rootLoader,
        children: [
          {
        
            path: "team",
            element: <Team />,
            loader: teamLoader,
          },
        ],
      },
    ]);
    
    ReactDOM.createRoot(document.getElementById("root")).render(
      <RouterProvider router={
        router} />
    );

> 说明：这个函数需要配合`<RouterProvider>`使用，具体使用方式见上例。