当前位置：首页 > news >正文

React 学习笔记总结(八)

news 来源：原创 2024/5/7 4:52:04

react-router6版本的学习笔记。

文章目录

一、React Router 6
二、router6版本的安装和一级路由
- 1. 安装router6版本
- 2. Routes组件和 Route的 element属性
三、router6 之重定向
四、router6的 NavLink高亮
五、router6 的 useRoutes路由表(重要)
六、router6 的嵌套路由
七、router6 的 params参数
八、router6 的 search参数
九、router6 的 state参数
十、router6 编程式路由导航
十一、router6 的 useInRouterContext
十二、router6 的 useNavigationType
十三、router6 的 useOutlet
十四、router6 的 useResolvedPath

一、React Router 6

React Router 6版本是从2021年11月开始，便是默认版本了。

与 5 相比 6的变化如下：
在这里插入图片描述

提示：因为router6版本新增了多个hook，所以官方明确推荐函数式组件。

二、router6版本的安装和一级路由

1. 安装router6版本

rsf + tab 快捷键快速生成函数式组件。

# 安装react-router-dom6版本
yarn add react-router-dom
# 或者
"react-router-dom": "^6.6.2"

2. Routes组件和 Route的 element属性

router6版本移除了Switch，让Routes替换了Switch。

router6版本的Route中的属性component 变化为了 element如下：

<Routes>
 	<Route path="/about" element={<About/>}/>
    <Route path="/home" element={<Home/>}/>
</Routes>

简单的示例：

import React from 'react';
import {NavLink,Routes,Route} from 'react-router-dom'
import About from "./pages/About";
import Home from "./pages/Home";

function App(props) {
    return (
        <div>
            <h1>App</h1>
            <div>
                <NavLink to="/about">About</NavLink>
                <br/>
                <NavLink to="/home">Home</NavLink>
            </div>
            <div>
                <Routes>
                    <Route path="/about" element={<About/>}/>
                    <Route path="/home" element={<Home/>}/>
                </Routes>
            </div>
        </div>
    );
}

export default App;

别忘记入口文件包裹，添加BrowserRouter：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root'))

Routes 和 Route的总结：
在这里插入图片描述

三、router6 之重定向

router6移除了Redirect，取而代之的是Navigate。

在这里插入图片描述
只要Navigate组件被渲染，就会修改路径，切换视图。

还需要注意replace属性用来控制跳转模式(默认为push模式)。

四、router6的 NavLink高亮

NavLink组件是高亮效果是通过active类展示的。

在这里插入图片描述

五、router6 的 useRoutes路由表(重要)

useRoutes很好用，一般项目中，都要单独写出来。

import React from 'react';
import {NavLink,useRoutes} from 'react-router-dom'
import About from "./pages/About";
import Home from "./pages/Home";

function App(props) {

    // fixme useRoutes的使用
    const element = useRoutes([
        {
          path:'/about',
          element:<About/>
        },
        {
            path:'/home',
            element:<Home/>
        },
    ])

    return (
        <div>
            <h1>App</h1>
            <div>
                <NavLink to="/about">About</NavLink>
                <br/>
                <NavLink to="/home">Home</NavLink>
            </div>
            <div>
                {element}
            </div>
        </div>
    );
}

export default App;