Router 的基本使用！

我們需要npm 下載react-router：

npm install react-router --save

BrowserRouter或HashRouter

• Router中包含了對路徑改變的監(jiān)聽，并且會將相應(yīng)的路徑傳遞給子組件；
• BrowserRouter使用history模式；
• HashRouter使用hash模式；

Link和NavLink

• 通常路徑的跳轉(zhuǎn)是使用Link組件，最終會被渲染成a元素；
• 是在Link基礎(chǔ)上增加了一些樣式屬性；
• Link中最重要的屬性，用于設(shè)置跳轉(zhuǎn)到的路徑；

Route

• Route用于路徑的匹配；
• path屬性：用于設(shè)置匹配到的路徑；
• element屬性：設(shè)置匹配到路徑后，渲染的組件；
• exact：精準(zhǔn)匹配，只有精準(zhǔn)匹配到完全一致的路徑，才會渲染對應(yīng)的組件；

創(chuàng)建第一個路由：
要使用react-router 創(chuàng)建第一個路由 首先我們需要在 總?cè)肟谖募镆?#xff1a;

import { BrowserRouter } from 'react-router-dom' //引入react-router-dom模塊包 包裹根目錄AppReactDOM.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,document.getElementById('root') );

這是從 react-router-dom 庫導(dǎo)入的第一個組件。它用于包裝不同的路線，它使用HTML5 history API來跟蹤React應(yīng)用程序中的路由歷史記錄。

之后我們在 App.js 文件里 引用該下列方法：
我們需要 使用Routes 包裹住Route 來注冊路由
Route 里面path屬性是路徑，element是該路徑所對應(yīng)的組件。

//引入Routes包裹Route Route設(shè)置路由 Link跳轉(zhuǎn)路徑，相當(dāng)于a標(biāo)簽 import { Routes, Route, Link, NavLink } from 'react-router-dom'function App() {return (<div className="App"><Routes>{/* 通過定義route內(nèi)的path和element，確定每一個路徑path對應(yīng)的組件element */}<Route path='/' element={<Home />} /<Route path='/newone' element={<Newone />} />{/* 如果路徑地址不存在的話 */}<Route path='*' element={<NotFound />} /><Route path='/about' element={<About />}>{/* 默認(rèn)路由 */}<Route path='' element={<Dz />} />{/* 二級路由 about的子路由 */}<Route path='/about/address' element={<Dz />} /><Route path='/about/yhq' element={<Yhq />} />{/* 如果路徑地址不存在的話 */}<Route path='*' element={<NotFound />} /></Route></Routes></div>); }export default App;

下面使用 NavLink 進(jìn)行一個跳轉(zhuǎn) 相當(dāng)于a標(biāo)簽：

<NavLink to="/">首頁</NavLink> <NavLink to="/about">about頁</NavLink>

跳轉(zhuǎn)路由：
當(dāng)然，我們也可以跳轉(zhuǎn)路由，但是我們react 不想vue那樣使用 push，go，replace進(jìn)行一個跳轉(zhuǎn)；
我們需要 引入 useNavigate 方法，注意 我們這里使用這些api方法，必須在函數(shù)式組件內(nèi)使用；
請看以下代碼片段：

//跳轉(zhuǎn)路由 import { useNavigate } from 'react-router-dom'function Home() {//使用引入的useNavigate方法 聲明一個對象let navigate = useNavigate()return (<div>我是home組件{/* 跳轉(zhuǎn)路由的按鈕 */}<input type="button" value="跳轉(zhuǎn)about組件" onClick={() => { navigate('/about') }} /></div>)} export default Home;

總結(jié)

以上是生活随笔為你收集整理的React中的路由react-router的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。