react-router-dom v6入門(轉載,侵刪)
1.安裝依賴
npm i react-router-dom
2.引入實現路由所需的元件,以及頁面元件
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Foo from './Foo'; import Bar from './Bar'; function App(){ return ( <BrowserRouter> <Routes> <Route path='/foo' element={Foo} /> <Route path='/bar' element={Bar} /> </Routes> </BrowserRouter> ) }
注意:BrowserRouter
元件最好放在最頂層所有元件之外,這樣能確保內部元件使用Link做路由跳轉時不出錯
一、Switch重新命名為Routes(用法如上)
二、路由跳轉
在跳轉路由時,如果路徑是/
開頭的則是絕對路由,否則為相對路由,即相對於“當前URL”進行改變
三、Link元件
Link元件
只能在Router內部使用,因此使用到Link元件
的元件一定要放在頂層的Router之內
import { Link } from 'react-router-dom';
<Link to='foo'>to foo</Link>
四、NavLink元件
NavLink元件
Link元件
的功能是一致的,區別在於可以判斷其to屬性
是否是當前匹配到的路由NavLink元件
的style
或className
可以接收一個函式,函式接收一個isActive引數
,可根據該引數調整樣式
import { NavLink } from 'react-router-dom'; function Foo(){ return ( <NavLink style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) } >Click here</NavLink> ) }
五、Outlet (渲染任何匹配的子級路由頁面)
return ( <div className="A"> <h3>我是A元件 --------- 程式設計式路由導航使用示例</h3> <div className="A-navBox"> <Button type="primary" onClick={() => navigateRouter(1, 1, "i am Jason Ma")}> params傳參 </Button> <Button onClick={() => navigateRouter(2, 18, "i am Jason Ma")}>search傳參</Button> <Button type="dashed" onClick={() => navigateRouter(3, 999, "i am Jason Ma")}> state傳參 </Button> </div> {/* 渲染任何匹配的子級路由頁面 */} <Outlet></Outlet> </div> );
六、獲取params引數
- 在
Route元件
中的path屬性
中定義路徑引數 - 在元件內通過
useParams
hook訪問路徑引數
<BrowserRouter> <Routes> <Route path='/foo/:id' element={Foo} /> </Routes> </BrowserRouter> import { useParams } from 'react-router-dom'; export default function Foo(){ const params = useParams(); return ( <div> <h1>{params.id}</h1> </div> ) }
在以前版本中,元件的props會包含一個match物件,在其中可以取到路徑引數。但在最新的6.x版本中,無法從props獲取引數。
並且,針對類元件的withRouter高階元件已被移除。因此對於類元件來說,使用引數有兩種相容方法:
1.將類元件改寫為函式元件
2.位元組寫一個HOC來包裹類元件,用useParams獲取引數後通過props傳入原本的類元件
七、程式設計式路由導航用useNavigate
代替useHistory
使用useNavigate
鉤子函式生成navigate物件,可以通過JS程式碼完成路由跳轉
// v5 import { useHistory } from 'react-router-dom'; function MyButton() { let history = useHistory(); function handleClick() { history.push('/home'); }; return <button onClick={handleClick}>Submit</button>; };
現在,history.push()
將替換為navigation()
:
// v6 import { useNavigate } from 'react-router-dom'; function MyButton() { let navigate = useNavigate(); function handleClick() { navigate('/home'); }; return <button onClick={handleClick}>Submit</button>; };
history
的用法也將被替換成:
// v5 history.push('/home'); history.replace('/home'); // v6 navigate('/home'); navigate('/home', {replace: true});
八、search引數
- 查詢引數不需要在路由中定義
- 使用
useSearchParams
hook來訪問查詢引數。其用法和useState類似,會返回當前物件和更改它的方法 - 更改searchParams時,必須傳入所有的查詢引數,否則會覆蓋已有引數
import { useSearchParams } from 'react-router-dom'; // 當前路徑為 /foo?id=12 function Foo(){ const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get('id')) // 12 setSearchParams({ name: 'foo' }) // /foo?name=foo return ( <div>foo</div> ) }
九、預設路由
定義:在巢狀路由中,如果URL僅匹配了父級URL,則Outlet
中會顯示帶有index
屬性的路由
<Routes> <Route path='/foo' element={Foo}> <Route index element={Default}></Route> <Route path='bar' element={Bar}></Route> </Route> </Routes>
- 當url為/foo時:Foo中的Outlet會顯示Default元件
- 當url為/foo/bar時:Foo中的Outlet會顯示為Bar元件
十、全匹配路由
定義:path
屬性取值為*
時,可以匹配任何(非空)路徑,同時該匹配擁有最低的優先順序。可以用於設定404頁面。
<Routes> <Route path='/foo' element={Foo}> <Route path='bar' element={Bar}></Route> <Route path='*' element={NotFound}></Route> </Route> </Routes>
十一、多組路由
通常,一個應用中只有一個Routes
元件。
但根據實際需要也可以定義多個路由出口(如側邊欄和主頁面都要隨URL而變化)
<Router> <SideBar> <Routes> <Route></Route> </Routes> </SideBar> <Main> <Routes> <Route></Route> </Routes> </Main> </Router>
十二、重定向
當在某個路徑/a
下,要重定向到路徑/b
時,可以通過Navigate
元件進行重定向到其他路徑
等價於以前版本中的
Redirect
元件import { Navigate } from 'react-router-dom'; function A(){ return ( <Navigate to="/b" /> ) }本文轉載自csdn的Json Ma這位大神,地址為https://blog.csdn.net/qq_42753705/article/details/121871363
本文轉載的目的為自己初學react記錄和學習,侵權請聯絡我刪除