什么是前端路由#

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

const routes = {
    {
        path: '/about',
        component: About,
    },
    {
        path: '/article',
        component: Ariticle,
    }
}

创建路由开发环境#

yarn add react-router-dom

基本形式#

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'
import {createBrowserRouter, RouterProvider} from 'react-router-dom'

// 1.创建router实例对象并且配置路由对应关系

const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>Login</div>
  },
  {
    path: '/article',
    element: <div>Article</div>
  },
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 路由绑定
  <RouterProvider router={router}></RouterProvider>
);

路由导航#

声明式导航#

声明式导航是在模板中通过 <Link/> 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行。

<Link to="/article">文章</Link>

编程式导航#

编程式导航是通过 useNavigate 钩子得到导航方式，然后通过调用方法以命令的形式进行路由跳转。这种方法更加灵活。

import {useNavigate} from 'react-router-dom'

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            Login
            <button 
            onClick={() => navigate('/article')}>
            To Article
            </button>
        </div>
    )
}

导航传参#

searchParams传参#

navigate('/article?id=1001&name=jack')

const [params] = useSearchParams()
let id = params.get('id')

params传参#

// router
const router = createBrowserRouter([
    {
        path: '/',
        element: <div>Home</div>
    },
    {
        path: '/login',
        element: <Login/>
    },
    {
        path: '/article/:id',
        element: <Article/>
    }
])

navigate('/article/1001')

const params = useParams()
let id = params.id

嵌套路由#

在一级路由中又嵌套了其他路由，这种关系就叫做嵌套路由。

嵌套一级路由内的路由又称作二级路由。

const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout></Layout>,
        children: [
            {
                path: '/board',
                element: <Board></Board>
            },
            {
                path: '/About',
                element: <About></About>
            }
        ]
    },
])

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Layout() {
    return (
        <div>
            这是一级路由
            {/* 配置二级路由出口 */}
            <div></div>
            <Link to='/About'>About</Link>
            <div></div>
            <Link to='Board'>Board</Link>
            <div></div>
            <Outlet></Outlet>
        </div>
    )
}

默认二级路由#

当访问一级路由时，默认的二级路由可以得到渲染，只需要在二级路由的位置去掉 path，设置 index 属性为 true。

children: [
    {
        index: true
        element: <Board></Board>
    },
    {
        path: '/About',
        element: <About></About>
    }
]

404路由配置#

当浏览器输入 url 的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染。

准备一个 NotFound 组件；
在路由表的末尾，以 * 号作为路由 path 配置路由。

// NotFound
const NotFound = () => {
    return <div>This is NotFound</div>
}

export default NotFound

{
    path: '*',
    element: <NotFound/>
}

两种路由模式#

History 模式和 hash 模式分别需要 createBrowerRouter 和 createHashRouter 函数负责创建。

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

路由懒加载#

路由懒加载是指路由的 JS 资源只有在被访问时才会动态获取，目的是为了优化项目首次打开的时间。

把路由修改为由 React 提供的 lazy 函数进行动态导入；
使用 React 内置的 Suspense 组件包裹路由中的 element 选项对应的组件。

import { Suspense, lazy } from "react";
// 1. lazy函数对组件进行导入
const Layout = lazy(() => import('../pages/Layout'))
const Board = lazy(() => import('../pages/Board'))
const About = lazy(() => import('../pages/About'))
const NotFound = lazy(() => import('../pages/NotFound'))

{
    path: '/About',
    element: 
    <Suspense fallback={'Loading'}>
        <About></About>
    </Suspense>
}