react-router简单入门

安装

npm install react-router-dom

编写router文件

import { lazy, useEffect } from "react";
import { RouteObject, useRoutes,Navigate } from "react-router-dom";

const Index = lazy(()=>import('../page/Index'))
const Setting = lazy(()=>import('../page/Setting'))

const staticRoute:RouteObject[] = [
    {path:"/",element:<Navigate to="/index?order=s"/>},
    {path:"/index",element:<Index/>},
    {path:"/setting",element:<Setting />}
]

export default function LytRouter(){
    
    useEffect(()=>{
         
    },[])
    return <div>
         
        {useRoutes(staticRoute)}
    </div>
}

使用router

在BrowserRouter里面使用router

        <BrowserRouter>
            <div className={sty.left}>
                <Menu>
                    <MenuItem key={1}><SideButton str='index?order=s'>首字母排序</SideButton> </MenuItem>
                    <MenuItem key={2}><SideButton str='index?order=y'>原唱排序</SideButton></MenuItem>
                    <MenuItem key={3}><SideButton str='setting'>设置文件夹</SideButton></MenuItem>
                </Menu>
            </div>
            <div className={sty.right}>
                <LytRouter />
            </div>
        </BrowserRouter>

函数式跳转路由

用 const nav = useNavigate()获取路由hook,然后在startTransition函数的包裹下才可以正常跳转

import { ReactNode, startTransition } from "react"
import { useNavigate } from "react-router-dom"

export default function SideButton({str,children}:{str:string,children:ReactNode}){
    const nav = useNavigate()

    function jump(url:string){
        startTransition(()=>{
             nav(url)
        })
    }
   return <div onClick={()=>jump(`/${str}`)}>
        {children}
   </div>
}