最新React-router

react router  本质是url与组件之间的对应关系。

1.在index.js中引入RouterProvider 

在render(<RouterProvider router={router } />),将配置好的路由router传入router，

详细代码

import  ReactDOM  from "react-dom";

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

import router from "./router";

ReactDOM.render(
  <RouterProvider router={router}></RouterProvider>

,
document.getElementById('root')
)

2.配置路由

     引入createBrowserRouter，history模式 url后面直接/xxx;createHashRouter hash模式在url后面拼接#后再/xxx
     配置 路由信息, 配置path，element,

import {  createBrowserRouter ,createHashRouter } from "react-router-dom";
import App from '../App'
import State from '../content/state'
import UseStates from '../content/useStates';
import Arictl from '../content/Arictl'
import Bored from '../content/Bored'
import NoFound from '../content/NoFound'
const  router= createBrowserRouter([
    {
        path:'/',
        element:<App> </App>
    },
    {
        path:'/se',
        element:<State> </State>,
        children:[
            {
           
                index:true,    //二级路由默认路由，又称重定向
                element:<Arictl></Arictl>
            },
            {
                path:'/se/b',   // searchParams 传参不需要在配置路由里面做事情
                element:<Bored></Bored>
            }
        ]
    },
    {
        path:'/ue/:id',     //params传参id的占位符
        element:<UseStates></UseStates>,
       
    },
    {
        path:'*',    //自定义404错误url路由信息
        element:<NoFound></NoFound>
    }
])
export default  router

二级路由配置，在children中继续配置， 在页面中引入 Outlet 进行 二级路由占位<Outlet/>

import { useSearchParams,Link, Outlet}from 'react-router-dom'
export default function State (){
    searchparams传参方式的接收参数方式
const [params] = useSearchParams()
    
     const id = params.get('id')
     const name = params.get('name')

    return(
        <>
        {/* <h2>state 状态{id}{name}</h2> */}
        <h2>state 状态</h2>

        <Link to='/se'>文章</Link>
        <Link to='/se/b'>看板</Link>
        <p>二级路由接收的</p>  
        //二级路由的占位符
        <Outlet/>
        </>
    )
}

3.路由跳转和传参  

    1.引入useNavigate 

    const navigate =useNavigate()
    navigate('/send')
    <button onClick={()=>{navigate('/se')}}>去state状态</button>
    2.通过Link标签进行跳转 

    <Link to='/send'>文章</Link>

    两种传参方式:

        1.searchparams                      

第二个参数，{replace:true}  设置后不会有返回记录
        <button onClick={()=>{navigate('/se?id=100&name=qw',{replace:true})}}>去state状态</button>

        通过引入useSearchParams接收参数

         const [params] = useSearchParams()
        接收到参数 const id = params.get('id')

        2.params

        <button onClick={()=>{navigate('/ue/190')}}>去usestate状态</button>
        通过 引入useParams 进行接收 参数
        然后解构 const {id} = useParams() 

import {useNavigate} from 'react-router-dom'

export default function TaskApp() {
  const navigate =useNavigate()
 
    return (
<>
{/* searchparams */}
{/* <button onClick={()=>{navigate('/se?id=100&name=qw',{replace:true})}}>去state状态</button> */}
<button onClick={()=>{navigate('/se')}}>去state状态</button>

{/* params */}
<button onClick={()=>{navigate('/ue/190')}}>去usestate状态</button>

</>
    );
  }

 

 

  return (
    <>
      
      <SaveButton />
      <StatusBar />
      
    </>
  );
}

params接收参数的形式

import {  useParams } from "react-router-dom"
export default function useStates (){
    const {id} = useParams() 
    
    return(
        <>
        <h2>useState 状态{id}</h2>
        
        </>
        
    )
}