React — 路由

一、路由的使用

1.安装react-router-dom

npm i react-router-dom 

2.配置

（1）创建router实例对象并且配置路由对应关系

（2）路由绑定

import {createBrowserRouter,RouterProvider} from 'react-router-dom'

//（1）创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
  {
    path : '/login',
    element:<div>我是登录页面</div>
  },
  {
    path : '/article',
    element:<div>我是文章页面</div>
    },
])

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

    </RouterProvider>
  </React.StrictMode>
);

二、路由模块封装

1.创建page文件夹

2.创建router文件夹

import Login from "../page/Login";
import Article from "../page/Article";

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

const router = createBrowserRouter([
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article',
        element : <Article></Article>
    }
])

export default router

3.应用入口文件渲染

import {createBrowserRouter,RouterProvider} from 'react-router-dom'

import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    
    <RouterProvider router={router}>

    </RouterProvider>
  </React.StrictMode>
);

三、路由导航

1.声明式导航

说明：声明式导航是指在模板中通过<Link/>组件描述要跳转到哪里

语法：<Link to=''/article''>跳转</Link>

使用场景：菜单

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

const Login = ()=>{
    return <>
        <div>
            Login页面
            <Link to="/article">跳转文章</Link>
        </div>
    
    </>
}
export default Login

2.编程式导航

说明：编程式导航是指通过‘useNavigate’钩子得到导航方法，然后通过调用方法以命令的形式进行路由跳转

语法：const navigate=uaeNavigate() navigate('/article')

使用场景：登录后跳转

import { Link,useNavigate } from "react-router-dom"
const Login = ()=>{
    const navigate = useNavigate()
    return <>
        <div>
            <button onClick={()=>navigate('/article')}>命令式跳转2</button>
        </div>
    </>
}
export default Login

四、导航传参

1.searchParams传参

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

//传参方：?分割参数 参数用&连接多个参数

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

2.params传参

const router = createBrowserRouter([
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article/:id/:name', //添加参数占位符
        element : <Article></Article>
    }
])

 <button onClick={()=>navigate('/article/1001/jack')}>params传参</button> //直接/+参数值

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

const Article = ()=>{

    const params = useParams()
    const id = params.id
    const name = params.name

    return <>
        <div>

            {id} + {name}
        </div>
    
    </>
}

五、嵌套式路由

1.实现步骤

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

const router = createBrowserRouter([
    {
        path : '/',
        element : <Layout></Layout>,
        children :[{
            path : '/board',
            element : <Board></Board>
        },
        {
            path : '/about',
            element : <About></About>
        }]
    },
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article/:id/:name',
        element : <Article></Article>
    }
])

（2）使用<Outlet/>组件配置二级路由渲染位置

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

const Layout= ()=>{
    return <>
        <div>
            我是一级组件Layout
        </div>
        <div>

            <Link to='/board'> 面板</Link>
            <Link to='/about'> 关于</Link>
        </div>
        {/* 配置二级路由的出口 */}
    
        <Outlet></Outlet>
    </>
}

export default Layout

2.默认二级路由

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

const Layout= ()=>{
    return <>
        <div>
            我是一级组件Layout
        </div>
        <div>
            <Link to='/'> 面板</Link> //2.路径修改/
            <Link to='/about'> 关于</Link>
        </div>
        {/* 配置二级路由的出口 */}
    
        <Outlet></Outlet>
    </>
}

六、404路由配置

说明：当浏览器输入url路径在整个路由配置中都找不到对应的path，为了用户体验，展示404进行渲染

const router = createBrowserRouter([
    {
        path : '/',
        element : <Layout></Layout>,
        children :[{
            index:true,
            element : <Board></Board>
        },
        {
            path : '/about',
            element : <About></About>
        }]
    },
    {
        path : '*',
        element: <NotFound></NotFound>
    } //添加NotFound组件 使用*配置

])

七、路由模式

1.hash ：由react-dom中 createHashRouter创建（底层：监听hashChange事件）

2.history：使用react-dom中 createBrowerRouter创建（底层：history对象+pushState事件）需要后端支持