Day04-ReactRouter基础

一、介绍

1. 什么是前端路由？

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

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

2. 创建路由开发环境

// 使用CRA创建项目
npm create-react-app react-router-pro
// 安装ReactRouter包
npm i react-router-dom
// 启动项目
npm run start

3. 快速开始

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

const router = createBrowserRouter([
  {
    path:'/login',
    element: <div>登录</div>
  },
  {
    path:'/article',
    element: <div>文章</div>
  }
])
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router}/>
)

二、路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时可能需要传递参数进行通信。

1. 声明式导航

指通过<Link />组件描述出要跳转的路径，左侧菜单栏中的菜单通常使用这种方式

通过给组件的to属性指定要跳转到的路由，组件会被渲染为浏览器支持的a链接，如果要传参直接通过字符串拼接的方式拼接参数即可。

import { Link } from 'react-router-dom';

const Login = () => {
  return (
    <div>
    	<Link to='/article'>跳转到文章页</Link>
    </div>
  )
}

2. 编程式导航

指通过useNavigate钩子得到导航，然后通过调用方法以命令式的形式进行路由导航。

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

const Login = () => {
  const navigate = useNavigate();
  
  return (
    <div>
      <button onClick={() => navigate('/article')}>跳转至文章页</button>
    </div>
  )
}

3. 导航传参

1. searchParams传参

   navigate('/article?id=1001&&name=jack')
   const [params] = useSearchParams();
   const id = params.get('id');
   

2. params传参

   {
     path:'/login/:id/:name',
     element: <div>登录</div>
   }
   
   navigate('/article/1001/jack')
   const params = useParams();
   const id = params.id;
   

三、嵌套路由配置

在一级路由中又嵌套了其它路由，嵌套至一级路由内的路由又称为二级路由。

1. 嵌套路由配置

实现步骤：

1. 使用children属性配置路由嵌套关系
2. 使用<Outlet />组件配置二级路由渲染位置

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

const Layout = () => {
  return (
  	<div>
      {/*二级路由出口*/}
      <Outlet />
    </div>
  )
}

2. 默认二级路由

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

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

3. 404路由配置

实现步骤：

1. 准备一个NotFound组件
2. 在路由表数组的末尾，以*号作为路由path配置路由

const NotFound = () => {
  return <div>this is NotFound</div>
}
export default NotFound;

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

4. 两种路由模式

主流框架常用的路由模式有两种：history和hash，ReactRouter分别由createBrowerRouter 和createHashRouter函数负责创建。

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