26 react v6 路由

1 创建路由

import React, { lazy, Suspense } from 'react'
//lazy 路由懒加载   封装Suspense配合路由懒加载使用
function lazyLoad(Comp) {
    return (
        <Suspense fallback={<div></div>}>
            <Comp />
        </Suspense>
    )
}
// Navigate 重定向组件
import { Navigate, useRoutes } from "react-router-dom"
// 路由表写法
export default function RouterView() {
    const element = useRoutes([
        {
            path: "/login",
            element: lazyLoad(lazy(() => import("@/views/login"))),
        },
        { path: "*", element: lazyLoad(lazy(() => import("@/components/404"))) },//当路由地址不存在时触发
        {
            path: "/home",
            element: lazyLoad(lazy(() => import("@/views/home/home"))),
            // 嵌套路由
            children: [
                {
                    path: "/home/A",//嵌套路由 路径名称 父级路径名称 + /
                    element: lazyLoad(lazy(() => import("@/views/home/A")))
                },
            ]
        },


    ])
    return (element);
}

设置路由模式

​
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from "react-router-dom"// 两种路由模式的组件： BrowserRouter ( History模式 ) ， HashRouter( Hash模式 )
const Root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
Root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)


​

2 一级路由出口

import RouterView from '@/router/index'; //导入路由表
export default function App() {
  return (
    <>
      {/* 一级路由出口 */}
      <RouterView />
    </>
  )
}

3 嵌套路由出口

import { Outlet } from "react-router-dom"
//Outlet 子路由出口
import { Outlet } from "react-router-dom"
export default function Home() {
 
    return (
        <div>
            <div>
                {/*子路由出口*/}
                <Outlet />
            </div>
        </div>
    )
}

4路由重定向两种写法

第一种

// 引入Navigate 重定向组件

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

 {

            path: "/", //重定向路径  replace 不产生路由记录

            element: <Navigate replace to="/login" />

}

第二种

跳转不产生路由历史记录

navigate('/home/A', { replace: true });

5 路由跳转方式

import React, { } from 'react'
import { Link, useNavigate } from "react-router-dom"
export default function Home() {
    const navigate = useNavigate()
    const goB = () => {
        navigate("/home/B")
    }
    return (
        <div>
            {/* 方式一 */}
            <Link to='/home/A'>A页面</Link>
            {/* 方式二 */}
            <button onClick={goB}>B页面</button>
        </div>
    )
}

6 获取当前路由详细信息

import React, { useEffect } from 'react'
import { useLocation } from "react-router-dom"
export default function D() {
    const location = useLocation()//获取当前路由详细信息
    useEffect(() => {
        console.log(location);
    }, [])
    return (
        <div>D</div>
    )
}

7 跳转传参

方式一

import React, { } from 'react'
import { useNavigate } from "react-router-dom"
export default function Home() {
    const navigate = useNavigate()
    const goB = () => {
        navigate("B?id=123")//此方式跳转传值页面刷新, 参数不会丢失
    }
    return (
        <div>
            <button onClick={goB}>B页面</button>
        </div>
    )
}

接收参数

import React, { useEffect } from 'react'
import {useSearchParams } from "react-router-dom"
export default function B() {
    let [Params]  = useSearchParams()//获取路由跳转传参的参数
    useEffect(() => {
        console.log(Params.get('id'));
    }, [])
    return (
        <div>B</div>
    )
}

方式二

import React, { } from 'react'
import { useNavigate } from "react-router-dom"
export default function Home() {
    const navigate = useNavigate()
    const goC = () => {
        // 此方法传参需要配置路由
        /*  
        {
             path: "C/:id",
             element: lazyLoad(lazy(() => import("@/views/home/C"))),
         }
         */
        navigate("/home/C/123343")//此方式跳转传值页面刷新, 参数不会丢失
    }
    return (
        <div>
            <button onClick={goC}>C页面</button>
        </div>
    )
}

接收参数

import React, { useEffect } from 'react'
import { useParams } from "react-router-dom"
function C() {
  const { id } = useParams()//获取路由跳转传参的参数
  useEffect(() => {
    console.log(id);
  }, [])
  return (
    <div>C</div>
  )
}

export default C

方式三

import React, { } from 'react'
import { useNavigate } from "react-router-dom"
export default function Home() {
    const navigate = useNavigate()
    const goD = () => {
        //此方式跳转传值页面刷新, 参数不会丢失
        navigate("/home/D", {
            state: {
                name: "helo",
                id: "12322",
            }
        })
    }
    return (
        <div>
            <button onClick={goD}>D页面</button>
        </div>
    )
}

接收参数

import React, { useEffect } from 'react'
import { useLocation } from "react-router-dom"
export default function D() {
 
    const Params = useLocation().state//获取路由跳转传参的参数
    useEffect(() => {
        console.log(Params);
    }, [])
    return (
        <div>D</div>
    )
}