ReactRouter快速梳理

快速开始

1. 创建项目并安装所有依赖

   npx create-react-app react-router-pro
   

2. 安装最新的reactrouter包

   npm i react-router-dom
   

3. 启动项目

   npm run start
   

搭建路由（index.js)

//index.js项目的入口 从这里开始运行

//react必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目的根组件
import App from './App';

import {createBrowserRouter,RouterProvider} from 'react-router-dom'
		//路由配置
const router = createBrowserRouter([   
    {
        path:'/login',
        element: <div>我是登录页</div>
    },
    {
        path:'/article',
        element: <div>我是文档页</div>
    },
])
//把app根组件渲染到id为root的节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
  		/* 路由绑定 */}
        <RouterProvider router={router}></RouterProvider>
    </React.StrictMode>
    );

抽象路由模块

创建两个文件夹 page和router

page文件夹下的login文件夹下的login.js（article同理）

const Login = () =>{
    return <div>我是登录页</div>
}
export default Login

在router下的index.js中配置路由并导出

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

应用入口文件index.js渲染RouterProvider

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

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

路由导航跳转

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

声明式导航

通过在模版中通过’‘’'组件描述出要跳转到哪里去，常用在点击菜单的跳转操作

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

编程式导航

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

import { useNavigate } from "react-router-dom"
const Login = () =>{
    const navigate = useNavigate()
    return (
    <div>
        我是登录页
        <button onClick={() => navigate('/article')}>跳转到文档</button>
    </div>
    )
}
export default Login

路由导航传参

searchParams传参

login文件夹下的index.js

import { useNavigate } from "react-router-dom"
import { Link } from 'react-router-dom'
const Login = () =>{
    const navigate = useNavigate()
    return (
    <div>
        我是登录页
        <button onClick={() => navigate('/article?id=1001&name=Jack')}>serachparams传参跳转到文章页面</button>
    </div>
    )
}
export default Login

article文件夹下的index.js(接收参数)

import { useSearchParams } from "react-router-dom"
const Article = () =>{
    const [params] =  useSearchParams()      //接收参数
    const id = params.get('id')
    const name = params.get('name')
    return <div>我是文章页{id}-{name}</div>
}
export default Article

params传参

login文件夹下的index.js

import { useNavigate } from "react-router-dom"
import { Link } from 'react-router-dom'
const Login = () =>{
    const navigate = useNavigate()
    return (
    <div>
        我是登录页
        <Link to="/article">跳转到文章页</Link>
        <button onClick={() => navigate('/article/1001/jack')}>Params传参跳转到文章页面</button>
    </div>
    )
}
export default Login

修改路由router文件夹下的index.js

    {
        path:'/article/:id/:name',  //在对应的router位置拼接参数占位符
        element:<Article />
    }

article文件夹下的index.js(接收参数)

import { useParams } from "react-router-dom"
const Article = () =>{
    const params = useParams()
    const id = params.id
    const name = params.name
    return <div>我是文章页{id}-{name}</div>
}
export default Article

嵌套路由

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

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

router文件夹下的index.js

import Layout from "../page/Layout";
import Login from "../page/Login";
import Article from "../page/Article";
import About from "../page/About";
import Board from "../page/Board";
import { createBrowserRouter } from "react-router-dom";
//配置
const router = createBrowserRouter([
    {
        path:'/',            //一级路由
        element:<Layout />,
        children: [           //二级路由
            {
                path:'board',
                element:<Board />
            },
            {
                path:'about',
                element:<About />
            }
        ]
    },
    {
        path:'/login',
        element:<Login />
    },
    {
        path:'/article/:id',
        element:<Article />
    },

])
export default router

Layout文件夹下的index.js

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

默认二级路由配置

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

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

404路由配置

当浏览器找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染

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

const NotFound = () =>{
  return <div>页面跑到月球了 </div>
}
export default NotFound

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

两种路由模式

history 模式 和 hash模式

ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

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

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