Router 的基本使用！

我們需要npm 下載react-router：

npm install react-router --save

BrowserRouter或HashRouter

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

Link和NavLink

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

Route

• Route用于路徑的匹配；
• path屬性：用于設置匹配到的路徑；
• element屬性：設置匹配到路徑后，渲染的組件；
• exact：精準匹配，只有精準匹配到完全一致的路徑，才會渲染對應的組件；

創建第一個路由：
要使用react-router 創建第一個路由 首先我們需要在 總入口文件里引入：

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

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

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

//引入Routes包裹Route Route設置路由 Link跳轉路徑，相當于a標簽 import { Routes, Route, Link, NavLink } from 'react-router-dom'function App() {return (<div className="App"><Routes>{/* 通過定義route內的path和element，確定每一個路徑path對應的組件element */}<Route path='/' element={<Home />} /<Route path='/newone' element={<Newone />} />{/* 如果路徑地址不存在的話 */}<Route path='*' element={<NotFound />} /><Route path='/about' element={<About />}>{/* 默認路由 */}<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 進行一個跳轉 相當于a標簽：

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。