26 react v6 路由

1 创建路由

import React, { lazy, Suspense } from 'react'
//lazy 路由懒加载   封装Suspense配合路由懒加载使用
function lazyLoad(Comp) {
    return (
        

}> ) } // 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(
  
    
  
)


​

2 一级路由出口

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

3 嵌套路由出口

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

            

                {/*子路由出口*/}
                
            
        
    )
}

4路由重定向两种写法

第一种

// 引入Navigate 重定向组件

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

 {

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

            element:

}

第二种

跳转不产生路由历史记录

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 (
        

            {/* 方式一 */}
            A页面
            {/* 方式二 */}
            B页面
        
    )
}

6 获取当前路由详细信息

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

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 (
        

            B页面
        
    )
}

接收参数

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 (
        
B
    )
}

方式二

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 (
        

            C页面
        
    )
}

接收参数

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

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 (
        

            D页面
        
    )
}

接收参数

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