安装

yarn add react-router-dom

引用

 <BrowserRouter>   //historey模式，HashRouter为哈希模式带#
      <div className='App'>
        <Routes>
           <Route path='/login' element={<Login></Login>}></Route>
           <Route path='*' element={<Navigate to="/"></Navigate>}></Route>  // 路由重定向 
           <Route path='/' element={<Loyout />}>  //子路由直接包裹
                <Route path='about' element={<About></About>}>
                     <Route path='detail' element={<Detail></Detail>}></Route>
                  </Route>             
           </Route>
      
        </Routes>
      </div>
    </BrowserRouter>

路由传参

params传参

<Link className="nav" to={/b/child2?age=20&name=zhangsan}>Child2</Link>

或

<Link to={/b/child1/${id}/${title}}>Child1</Link>

注册路由（声明接受）

<Route path="/b/child1/:id/:title" component={Test} />

接收参数

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

const params = useParams();

search参数

路由链接(携带参数)

<Link className="nav" to={/b/child2?age=20&name=zhangsan}>Child2</Link>

注册路由(无需声明，正常注册即可)

<Route path="/b/child2" component={Test}/>

接收参数:

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

const [searchParams, setSearchParams] = useSearchParams();

console.log( searchParams.get("id")); // 12

state参数

<Link to='/layout' state={list}></Link>

const goLayout = () =>{navigate('/layout',{state:list})}

注册路由(无需声明，正常注册即可)

接收参数：

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

const { state } = useLocation();

备注：刷新也可以保留住参数