本次使用react-router 版本為 5.0.1 本教程前提是你的應用程序是一個web應用程序，使用’react-router-dom‘包來實現(xiàn)頁面的路由

在React router中有三種類型的組件，一是路由組件第二種是路徑匹配組件第三種是導航組件。 路由組件: BrowserRouter 和 HashRouter 路徑匹配的組件: Route 和 Switch 導航組件: Link

安裝

npm install react-router-dom 復制代碼

簡單用法

import React from 'react' import TodoList from './components/TodoList' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import './App.css'const App: React.FC = () => {return (<div className='App'><Router><Link to='/'>root</Link> <br /><Link to='/hello'>hello</Link> <br /><Link to='/todolist'>todolist</Link><div><Route path='/' exact render={() => {return <div>root page</div>}} /><Route path='/hello' render={() => {return <div>hello world</div>}} /><Route path='/todolist' component={TodoList} /></div></Router></div>) }export default App復制代碼

通過上面的代碼我么就實現(xiàn)了我們項目的基本路由功能，Router組件決定了我們使用html5 history api，Route組件定義了路由的匹配規(guī)則和渲染內容，使用 Link 組件進行路由之間的導航。使用 exact 屬性來定義路徑是不是精確匹配。

使用url傳參數(shù)

<Route path='/hello/:name' render={({match}) => {return <div>hello {match.params.name}</div>}} /> 復制代碼

使用 <Route> 匹配的react 組件會在props 中包含一個match 的屬性,通過match.params可以獲取到參數(shù)對象

調用方法跳轉

<Route path='/hello/:name' render={({ match, history }) => {return <div>hello {match.params.name}<button onClick={()=>{history.push('/hello')}}>to hello</button></div> }} /> 復制代碼

使用 <Route> 匹配的react 組件會在props 中包含一個history 的屬性,history中的方法

history.push(url) 路由跳轉

hisroty.replace(url) 路由跳轉不計入歷史記錄

history.go(n) 根據(jù)索引前進或者后退

history.goBack() 后端

history.goForward() 前進

常用組件介紹

BrowserRouter

使用HTML5歷史記錄API（pushState，replaceState和popstate事件）的，以使您的UI與URL保持同步。

屬性：

1.basename: string 如果你的項目在服務器上的一個子目錄那么這個basename就是目錄的名稱例如/calendar

<BrowserRouter basename="/calendar" /> <Link to="/today"/> // renders <a href="/calendar/today"> 復制代碼

2.getUserConfirmation

結合 組件使用可以攔截和修改 Prompt 的消息。

function getConfirmation(message, callback) {const allowTransition = window.confirm(message);callback(allowTransition); }<BrowserRouter getUserConfirmation={getConfirmation} />;復制代碼

3.forceRefresh:bool 如果為true在頁面導航的時候后采用整個頁面刷新的形式。 4.keyLength location.key(表示當前位置的唯一字符串)的長度。默認為6。 5.children:node 要渲染的子元素。

Route

主要職責是當Route的位置和路徑匹配的時候渲染對應的ui

屬性：

用于渲染的props

1.component 一個react 組件，將在path匹配的時候自動渲染

2.render:func 通過編寫一個方法，方法返回一個react dom ,當 path匹配的時候自動渲染

3.children:func 同樣是一個方法，匹配規(guī)則時無論path是否匹配都會渲染,但是match屬性只有在路由匹配的時候才會有值。這樣方便你根據(jù)路由是否匹配渲染不同的ui

<Route path='/hello' exact children={({ match, history, location }) => {return <div>hello {match ? 'match' : ''}</div>}}></Route>復制代碼

上面的三種方法都能在組件中獲取到route傳過去的三個props history / location / match

其他屬性：

4.path:string | string[] 需要匹配的路徑或者路徑數(shù)組

5.exact:bool 如果為true，則僅在路徑與location.pathname完全匹配時才匹配。

6.strict 如果為true，則具有尾部斜杠的路徑將僅匹配具有尾部斜杠的location.pathname。當location.pathname中有其他URL段時，這不起作用。

7.sensitive:bool 匹配規(guī)則對大小寫是否敏感，true 的話為區(qū)分大小寫。

Link

導航到指定的路由

屬性：

1.to:string|object 如果值為字符串，則導航到字符串所在的路由 object:

• pathname :表示鏈接到的路徑的字符串 /hello
• search :query參數(shù) ?name=cfl
• hash : hash的值 #weixin
• state

Switch

呈現(xiàn)于于location.pathname 所匹配的第一個 或。

Prompt

當從當前路由退出的時候給一個提示框。

class TestComp extends React.Component {render() {return <div><Prompt message='test' when={true}></Prompt>test router</div>} }復制代碼

轉載于:https://juejin.im/post/5cfb2894e51d4510774a8831

總結

以上是生活随笔為你收集整理的React Router 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

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