react-router-V6

React Router​reactrouter.com/en/main

添加库

react-router和react-router-dom的区别？
react-router-dom提供了与浏览器 DOM 相关的功能，例如 <Link>，可以去使用dom元素的去控制路由

yarn add react-router-dom
或者
npm i react-router-dom

创建RouterProvider向下传递路由

BrowerserRouter和HashRouter的区别？
BrowserRouter利用H5 history API实现url地址改变，并通过 pushState 和 replaceState 改变 URL，但不会触发浏览器的刷新。这使得单页应用程序可以像多页应用程序一样具有多个路由
HashRouter使用window.location.hash 属性和window.onhashchange事件。可以监听浏览器hash值得变化，去执行相应的js切换网页。使用 URL 中的 hash（#）部分来进行路由管理。

1.通过createBrowserRouter 创建一个路由表，然后通过RouterProvider向下传递

//index.js文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
import './index.css';
import routers from './router/index'
const router = createBrowserRouter(routers);//1.通过createBrowserRouter 创建一个路由表
const root = ReactDOM.createRoot(document.getElementById('root'));
//2.然后通过RouterProvider向下传递
root.render(
    <RouterProvider router={router} />
);

2.分离router，创建routers文件

import { lazy，Suspense } from "react";
// const App = lazy(() => import('./App'));//懒加载方式
import App from './App'//正常加载方式
import Contact from './pages/contact'
import ErrorPage from './pages/error-page'
import NoMatch from './pages/noMatch'
import { Navigate } from "react-router-dom";

export default [
    {
        path: "/",
        element: <App />,//如果是懒加载就必须这样写Suspense 里的fallback会在还没加载出组件时显示--<Suspense fallback={<div>loading</div>}><App /></Suspense>
        errorElement: <ErrorPage />,//当APP页面出现错误时（比如null.slice()会导致页面崩溃）此时会加载这个页面。
        children: [

            {
                path: "contacts/:contactId",//:contactId被称为URL 参数，它是动态的是任意值，在当前页面用useParams()可以解构出contactId
                element: <Contact />,
                index: true,//index和path只能有一个，inex代表默认显示
                caseSensitive: false,//是否匹配path的大小写
            },
            {
                path: 'navigate',
                element: <Navigate to="/contacts/123" />//实现路由重定向，要引入Navigate组件
            },
            {
                path: '*',//当所有路由都不匹配的时候，就会匹配该路径
                element: <NoMatch />
            },
        ]
    },
]

通过Outlet实现包裹的子父组件关系

1.在外部组件中创建Outlet组件

import React from 'react'
import { Outlet } from "react-router-dom";
export default function App () {
    return (
        <div>
            我是APP
            <Outlet />
        </div>
    )
}

2.在路由表中进行配置children（children中的组件会替代）

import { lazy } from "react";
const App = lazy(()=>import('../App'));//懒加载方式
const Test1 = lazy(()=>import('../pages/test1'));
export default[
    {
      path: "/",
      element: <App/>,
      children:[
        {   path:'/',
            element:<Test1/>
        }
      ]
    },
  ]

路由跳转

Link组件和NavLink组件的区别？
Link 组件最终会渲染为 HTML 标签
当使用 NavLink 时，如果该链接与当前活动路径匹配，则 React Router 会自动为该链接添加一个名为 active 的 CSS 类名

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

 <Link to='/test1'>跳转</Link>

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

<NavLink to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>
//或者
<NavLink
            to="tasks"
            className={({ isActive }) =>
              isActive ? activeClassName : undefined
            }
          >
            Tasks
          </NavLink>
//或者

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

{user && (
          <Navigate to="/dashboard" />
        )}

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

const { id } = useParams();

import { Form, useSearchParams } from "react-router-dom";

const [searchParams, setSearchParams] = useSearchParams();//相当于useState，第二个变量用于设置url上？后的参数
console.log( searchParams.get("name"));//name是你要获取的参数名

import { useLocation } from 'react-router-dom';

let location = useLocation();
 useEffect(() => {
        console.log('location', location);
    }, [location])

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

 const navigate = useNavigate();
 navigate("/session-timed-out");

import { useParams } from 'react-router-dom';
let { userId } = useParams();

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

let [searchParams, setSearchParams] = useSearchParams();
//获取
 searchParams.get("name")//name是你要获取的参数名
//设置
setSearchParams({ a: 123, b: 345 })//注意他会直接把url上的所有的参数都替换掉