React笔记（四）

2024 年 5 月 3 日 星期五(已编辑)
/
6
摘要
React Router是一个可以在浏览器中根据路径渲染组件的工具，可以通过声明式导航或编程式导航进行路由跳转，还可以传递参数。嵌套路由可以将多个路由相互嵌套，而默认二级路由允许一级路由和二级路由同时渲染。当路径找不到时，可以通过404组件来处理。React Router有两种路由模式：history和hash模式，需要使用不同的函数来创建。路径解析配置可以通过craco插件来修改。
这篇文章上次修改于 2024 年 5 月 7 日 星期二，可能部分内容已经不适用，如有疑问可询问作者。

阅读此文章之前，你可能需要首先阅读以下的文章才能更好的理解上下文。

1. React Router

一个path对应一个组件component当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染

import {createBrowserRouter,RouterProvider} from "react-router-dom";

const routes = [
    {
        path: '/about',
        component: About,
    },
    {
        path: '/article',
        component: Article,
    },
]

//安装
npm i react-router-dom

tips:导入时候组件名首字母必须大写

集成

/* router.js */
import App from "../App";
import {createBrowserRouter} from "react-router-dom";
import About from "../components/about";
import Login from "../components/login";

const router =  createBrowserRouter([
    {
        path: '/',
        element: <App/>
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/login',
        element: <Login />
    }
]);

export default router;

/* src/index.js */
<React.StrictMode>
      <RouterProvider router={router}></RouterProvider>
</React.StrictMode>

2.路由导航

​ 多个路由之间进行跳转，传参通信

声明式导航：通过组件的to属性指定要跳转的路由path，组件会被渲染成浏览器的a链接，传参通过字符串拼接

//声明式导航
import { Link } from 'react-router-dom';
<link to='/login'>登录页面</link>

编程式导航：通过 'useNavigate' 钩子获取导航方法，然后通过调用方法以命令式的形式进行路由跳转

//编程式导航
import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
return (
    <button onClick={() => navigate('/home')}>跳转首页</button>
)

//后退
navigate(-1) // 返回上一页

3.路由导航传参

'searchParams'传参

//传
navigate('/login?id=1001&name=jack')
//接
const [params] = useSearchParams()
let id = params.get('id')

'Params'传参

//传
navigate('/login/1001/linmo')
//接
const params = useParams()
let id = params.id
//路由配置修改
path: '/login/:id/:name'

4.嵌套路由

一级路由中内嵌了其他路由，以此类推

//1.使用children属性配置路由关系
{
    path: '/',
    element: <Layout />,
    children: [
        {
            path: 'board',
            element: <Board />,
        },
        {
            path: 'about',
            element: <About />,
        },
    ],
},
//2.'<Outlet>'组件配置二级路由渲染位置
const Layout = () => {
    return (
        <div>
            <div>this is Layout</div>
            <Link to='board'>面板</Link>
            <link to='about'>关于</link>
            <Outlet />   //二级路由出口
        </div>
    )
}

5.默认二级路由

当访问的是一级路由的时候，默认的二级路由也可以得到渲染，只需要在二级路由的位置去掉path,设置index属性为true（即一级路由和二级路由同时渲染）

{
        path: '/layout',
        element: <Layout/>,
        children: [
            {
              index: true,
              element: <div>this is default router</div>
            },
            {
                path: 'broad',
                element: <div>this is 面板</div>
            },
        ]
}

6. 404路由配置

输入的url路径在整个路由配置中查找不到的时候用404组件来兜底

//1.准备一个NotFound组件
//2.在路由表数组的末尾，以'*'作为路由path来配置
{
        path: '*',
        element: <NotFound />
}

7. React Router--两种路由模式

各个主流框架路由常用的两种路由模式--'history'和 'hash'模式React Router分别用 createBrowerRouter 和createHashRouter 函数来负责创建

路由模式                 url表现                     底层原理               是否需要后端支持
history                url/login            hsitory对象+pushState事件          需要
 hash                  url/#/login            监听hashChange事件              不需要

8.路径解析配置

CRA本身把webpack配置包装在了黑盒里面无法直接修改，需要借助一个插件-craco

//1.安装craco
npm i -D @craco/craco
//2.项目根目录下创建配置文件
craco.config.js
//3.配置文件中添加路径解析配置
const path = require('path')
module.exports = {
    //webpack配置
    webpack: {
        //配置别名
        alias: {
            //约定：使用 '@' 作为src文件路径
            '@': path.resolve(__dirname,'src')
        }
    }
}
//4.包文件中配置启动和打包命令
"scripts": {
    "starts": "craco start",
    "build": "craco build"
}
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...