文章目錄

• • React學習：路由定義及傳參、數據復用-學習筆記
  • • 在React中使用react-router-dom路由
    • 簡單例子
    • 路由定義及傳參

React學習：路由定義及傳參、數據復用-學習筆記

在React中使用react-router-dom路由

使用React構建的單頁面應用，要想實現頁面間的跳轉，首先想到的就是使用路由。在React中，常用的有兩個包可以實現這個需求，react-router和react-router-dom。

安裝
首先進入項目目錄，使用npm安裝react-router-dom：

cnpm install react-router-dom --save

涉及知識點：
一般一個路由的至少會有三大組件，分別是BrowserRouter、Route、Link;
BrowserRouter：可以將其理解為一個容器，用來放Route、Link。
Route：可以理解為當前要展示的視圖，會根據路由中不同的路徑呈現不同展示。Route會有三大props，分別是location、history、match；其中match有包含params、isExact、path、url這些屬性。
Link：申明了路由的路由，要跳轉的地方，簡單的可以理解為“要到哪去”。

常用API
路由容器組件
BrowserRouter: 瀏覽器自帶的API，restful風格（需要后臺做相應的調整）；
HashRouter: 使用hash方式進行路由；
MemoryRouter: 在內存中管理history，地址欄不會變化。在reactNative中使用。

Route標簽
該標簽有三種渲染方式component、render、children（絕大多數情況使用component組件就好了）；
三種渲染方式都會得到三個屬性match、history、location；
渲染組件時，route props跟著一起渲染；
children方式渲染會不管地址欄是否匹配都渲染一些內容，在這里加動畫一時很常見的做法。

Link標簽
to: 后面可以接字符串，也可以跟對象（對象可以是動態地添加搜索的信息）；
replace: 當設置為true時，點擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址。

NavLink標簽
<NavLink>是<Link>的一個特定版本, 會在匹配上當前URL的時候會給已經渲染的元素添加樣式參數；
activeClassName，當地址匹配時添加相應class；
activeStyle，當地址匹配時添加相應style；
exact，當地址完全匹配時，才生效；
isActive，添加額外邏輯判斷是否生效。

Prompt標簽
when: when的屬性值為true時啟用防止轉換；
message: 后面可以跟簡單的提示語，也可以跟函數，函數是有默認參數的。

Redirect標簽
<Redirect/>可以寫在<Route/>的render屬性里面，也可以跟<Route/>平級；
to: 依舊是可以跟字符串或對象；
push: 添加該屬性時，地址不會被覆蓋，而是添加一條新紀錄；
from: 重定向，與<Route/>平級時。

match
params: 通過解析URL中動態的部分獲得的鍵值對；
isExact: 當為true時，整個URL都需要匹配；
path: 在需要嵌套<Route/>的時候用到；
url: 在需要嵌套<Link/>的時候會用到；

獲取方式:

this.props.match

導入方式：

import {BrowserRouter as Router, Route, // 這是基本的路由塊Link, // 這是a標簽Switch // 這是監聽空路由的Redirect // 這是重定向Prompt // 防止轉換 } from 'react-router-dom'

react-router和react-router-dom的區別是什么呢？
為什么有時候我們看到如下的寫法：
寫法1:

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

寫法2:

import {Switch, Route, Router} from 'react-router'; import {HashHistory, Link} from 'react-router-dom';

react-router: 實現了路由的核心功能
react-router-dom: 基于react-router，加入了在瀏覽器運行環境下的一些功能，例如：Link組件，會渲染一個a標簽，Link組件源碼a標簽行; BrowserRouter和HashRouter組件

其他函數
replace
有些場景下，重復使用push或a標簽跳轉會產生死循環，為了避免這種情況出現，react-router-dom提供了replace。在可能會出現死循環的地方使用replace來跳轉：

this.props.history.replace('/detail');

goBack
場景中需要返回上級頁面的時候使用：

this.props.history.goBack();

簡單例子

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import Routes from './project/routes' import * as serviceWorker from './serviceWorker'; //資源緩存//React.StrictMode嚴格模式 ReactDOM.render(<React.StrictMode><Routes /></React.StrictMode>,document.getElementById('root') ); serviceWorker.unregister(); import React,{Component} from 'react'; import {BrowserRouter as Router, Route} from 'react-router-dom'//導入組件 import Home from './home/index' import Login from './login/index'class Routes extends Component {render(){return (<Router><div><Route path='/login' component={Login} ></Route><Route path='/index' component={Home} ></Route></div></Router>)}}export default Routes;

路由定義及傳參

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import 'antd/dist/antd.css' import Routes from './project/routes/routes' import * as serviceWorker from './serviceWorker'; //資源緩存//React.StrictMode嚴格模式 ReactDOM.render(<React.StrictMode><Routes /></React.StrictMode>,document.getElementById('root') ); serviceWorker.unregister();

路由傳參：

import React,{Component} from 'react'; import {BrowserRouter as Router, Route, Link} from 'react-router-dom'//導入組件 import Banner from '../other/banner'// 音樂組件 class Music extends Component {render(){return <h1>Music {this.props.location.query}</h1>} } //類別組件 class Category extends Component {render(){return <h1>Category {this.props.match.params.id}</h1>} }class Routes extends Component {constructor(){super();this.state = {n:999}}render(){return (<Router>{/* 跳轉 */}<ul><li><Link to='/index/1/10'>首頁</Link></li><li><Link to={'/tool/'+this.state.n}>工具模塊</Link></li><li><Link to={{pathname:'/music',query:'123456'}}>音樂模塊</Link></li></ul>{/* 渲染出口 */}<div><Route path='/tool/:id' component={Category} ></Route><Route path='/index/:id/:size' component={Banner} ></Route><Route path='/music' component={Music} ></Route></div></Router>)}}export default Routes;

若將routes寫到另一個文件中，動態加載：

import React,{Component} from 'react';//導入組件 import Banner from '../other/banner'// 音樂組件 class Music extends Component {render(){return <h1>Music</h1>} } //類別組件 class Category extends Component {render(){return <h1>Category </h1>} }let routes = [{path:'/index',component:Banner},{path:'/tool',component:Category},{path:'/music',component:Music} ] export default routes; import React,{Component} from 'react'; import {BrowserRouter as Router, Route, Link} from 'react-router-dom' import routes from './index'class Routes extends Component {constructor(){super();this.state = {n:999}}render(){return (<Router>{/* 跳轉 */}<ul><li><Link to='/index'>首頁</Link></li><li><Link to='/tool'>工具模塊</Link></li><li><Link to='/music'>音樂模塊</Link></li></ul>{/* 渲染出口 */}<div>{routes.map((item,i)=>{return <Route key={i} path={item.path} component={item.component} ></Route>})}</div></Router>)}}export default Routes; 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React学习：路由定义及传参、数据复用-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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