ReactRouter

什么是前端路由 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行 渲染

创建路由开发环境：

使用路由我们还是采用CRA创建项目的方式进行基础环境配置 ’

1. 创建项目并安装所有依赖 npx create-react-app react-router-pro   npm i

2. 安装最新的 ReactRouter包 npm i react-router-dom

3. 启动项目 npm run start

创建一个可以切换登录页和文章页的路由系统：

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

//1.创建路由实例，并配置路由对应关系
const router = createBrowserRouter([
  {
    path:'/login',
    element:<div>登录</div>
  },
  {
    path:'/article',
    element:<div>文章</div>
  }
])
 const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    {/* 2.路由绑定 */}
  
   <RouterProvider router={router}></RouterProvider>

  </React.StrictMode>
)


// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

抽象路由模块：

import Login from '../page/login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router=createBrowserRouter ([
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/article',
        element:<Article/>
    }
])
export default router

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

//1.创建路由实例，并配置路由对应关系
// const router = createBrowserRouter([
//   {
//     path:'/login',
//     element:<div>登录</div>
//   },
//   {
//     path:'/article',
//     element:<div>文章</div>
//   }
// ])

//导入
import router from './router'


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

  </React.StrictMode>
)
reportWebVitals();

路由导航：

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

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

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

import {Link} from 'react-router-dom'
const login= ()=>{
    return (
    <div>
        我是登录页
        <Link to="/article">跳转到文章页</Link>
    </div>
)}
export default login

编程式导航

编程式导航是指通过 `useNavigate` 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在 登录请求完毕之后跳转就可以选择这种方式，更加灵活

import {Link,useNavigate} from 'react-router-dom'
const Login= ()=>{
    const navigate = useNavigate()
        return (
    <div>
        我是登录页
        {/* 声明式写法 */}
        <Link to="/article">跳转到文章页</Link>
        {/* 命令式写法 */}
        <button onClick={()=>navigate('/article')}>跳转到文章页</button>
    </div>
)}
export default Login

导航传参：

searchParams：

 <button onClick={()=>navigate('/article?id=1001&name=jack')}>searchParams传参</button>

目标页：

import { useSearchParams } from "react-router-dom"

const Article= ()=>{
 const [params]=   useSearchParams()
 const id = params.get('id')
    return  <div>我是文章页{id}</div>
    
}
export default Article

params传参：

<button onClick={()=>navigate('/article/1001')}>Params传参</button>

路由：

目标页：

const params = useParams()
const id = params.id
    return  <div>我是文章页{id}</div>

嵌套路由配置

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由

实现步骤：

1. 使用 children 属性配置路由嵌套关系

import Layout from '../page/Layout'
import Board from '../page/Board'
import About from '../page/About'
const router=createBrowserRouter ([
    {
        path:'/',
        element:<Layout/>,
        children:[
            {
                path:'Board',
                element:<Board/>
            },
            {
                path:'About',
                element:<About/>
            }
        ]
    },

2. 使用 `` 组件配置二级路由渲染位置

import {Link, Outlet } from "react-router-dom"

const Layout = ()=>{
    return (
        <div>
            我是一级路由layout
            <Link to="Board">面板</Link>
            <Link to="About">关于</Link>
            {/* 配置二级路由的出口
             */}
             <Outlet/>
        </div>
    )
}
export default Layout

默认二级路由:

404路由配置:

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

实现步骤：

1. 准备一个NotFound组件

const NotFound =()=>{
    return <div>4-0-4</div>
}
export default NotFound

2. 在路由表数组的末尾，以*号作为路由path配置路由

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

俩种路由模式:

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