React 《路由快速上手》

前端路由

1. 什么是前端路由

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

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} 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. 什么是路由导航

2. 声明式导航

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

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

3. 编程式导航

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

语法说明：通过调用navigate方法传入地址path实现跳转

导航传参

嵌套路由配置

1. 什么是嵌套路由

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

2. 嵌套路由配置

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

3. 默认二级路由

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

4. 404路由配置

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

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

5. 俩种路由模式

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

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

快速例子

1.目录结构

2.入口文件main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import router from "./router";
import { RouterProvider } from "react-router-dom";
ReactDOM.createRoot(document.getElementById('root')).render(
  // <Login />
  <RouterProvider router={router} />
)

3.路由文件router/index.jsx

import Login from "../page/Login";
import Article from "../page/Article";
import Main from "../page/Main";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
    {
        path: '/',
        element:<Main />,
        children:[
            {
                index: true, //默认二级路由
                element: <Article />
            },
            {
                path: '/login?id=101', //传参使用 const [params] = useSearchParams()  params.id
                element: <Login />
            }
        ]
    },
    {
        path:'*',//404 路由
        element: <div>Not Found!404</div>
    }
])
export default router

4.主页面page/Main/index.jsx

import { Outlet,Link } from "react-router-dom";
export default function Main(){
        return (
            <>
                <div>首页</div>
                <Link to="/login" >登陆</Link><br />
                <Link to="/article" >文章</Link>
                <Outlet />
            </>
 
        )
}

5.登陆page/Login/index.jsx

import { Link ,useNavigate} from "react-router-dom";
const Login = ()=>{
    const go = useNavigate()
    return (
        <>
            <div>
                {/* 这个是测试一级路由 */}
                <Link to="/article?id=1001&name=zhangsan"> 登陆</Link>
            </div>
            <br />
            {/* 这个是测试一级路由 */}
            <button onClick={()=>go('/article/1002')}>跳转</button>
        </> 
    )
}
export default Login

5.文章page/Article/index.jsx

import { useParams, useSearchParams } from "react-router-dom"
const Article = ()=>{
    const [params] =  useSearchParams() // `like /path/?id=101&name=zhangsan`
    const pars = useParams()
    const myid = params.get('id')|pars.id //`like /path/:id/`
    console.log(myid);
    return (
        <div>Article</div>
    )
}
export default Article

6.创建项目依赖

# 选择react
npm create vite@latest 
# 路由依赖
npm install react-router-dom