react-router[Router](React Router | React入门到实战 (gitee.io)) 前

[Router](React Router | React入门到实战 (gitee.io))

前端路由的本质？

后端-不同的资源路径标识符-服务端资源
前端-不同的path - 不同的component
本质就是路径和组件的一一对应关系访问路径时渲染出来对应的组件

引入createBrowerRouter方法和RouterProvider组件。
使用createBrowerRouter配置路由path和组件的对应关系生成router实例。
渲染RouterProvider组件并传入router实例。

createBrowerRoute - 创建路由实例在方法中定义路由path和组件的对应关系。 RouterProvider - 作为一个组件渲染，并且传入createBrowerRouter执行之后的生成的router实例。

//1.引入一个方法和一个组件
import {createBrowerRouter,RouterProvider} from 'react-router-dom'

//2.调用create方法生成实例
const router=createBrowerRouter([
    {
        path:'/',
        element:<Home />,
    },
    {
        path:'/login',
        element:<Login />, 
    },
])

//3.渲染组件
ReactDOm.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
)

两种路由模式

前端路由由于实现方式的不同，常用的分成history和hash路由，分别由createBrowerRouter和createHashRouter创建。

1. 路由模式      url表现       底层原理              是否需要后端支持
2. history     url/login   history+pushState    需要
3. hash       url/#/login  监听hashchange事件   不需要

编程式导航

通过js编程的方式进行路由页面跳转，比如从首页跳转到关于页

实现步骤；
1.导入一个useNavigate钩子函数
2.执行useNavigate函数的到跳转函数
3.在事件中执行跳转函数完成路由跳转

navigate('/about',{replace:true}),第一个参数是路由，第二个参数是用来确定跳转的路由是否替换之前的路由，不生成历史记录。

路由传参

//路由穿惨方式1:seacchParams传参->查询字符串传参的方式比较简单，参数的形式以问号拼接的到地址后面
navigate('/about?id=1001')
//在跳转的页面中如何获取传递的参数呢？
//1.先导入useSearchParams函数
import { useSearchParams } from 'react-router-dom'
//2.执行一下函数，通过解构赋值获取params
const [params]=useSearchParams()
//3.获取参数
const id=params.get('id)
//通过以上步骤就可以获取传过来的id参数

//路由传参方式2：params
navigate('/about/1001')
//得去路由配置位置找到你要跳转的about路由下面给他写一个参数占位
const router=createBrowerRouter([
    {
        path:'/',
        element:<Home />,
    },
    {
        path:'/login',
        element:<Login />, 
    },
    {
        path:'/about/:id',
        element:<About />, 
    },
])
//获取通过params传过来的参数需要导入useParams函数
import { useSearchParams，useParams } from 'react-router-dom'
const params=useParams(),//得到的params是一个对象，其中有一个属性id，直接通过params.id就可以获取到id了，而searchParams是得到一个对象，其中有get方法，在通过get方法获取id。