詳解React路由傳參方法匯總記錄
更新時間：2020年11月29日 11:00:53 作者：樂聞x
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
React中傳參方式有很多，通過路由傳參的方式也是必不可少的一種。
本文記錄項目中會用到的路由傳參方式： 路由跳轉傳參API + 目標路由獲取參數(shù)的方式。
一、動態(tài)路由
跳轉方法
Link
<Link to={{ pathname: "/user/add/1" }}>跳轉新增頁面</Link>
history.push
this.props.history.push("/user/add/1");
獲參方法
this.props.match.params
二、路由query顯示參數(shù)
Link跳轉
<Link to={{ pathname: "/user/add", query: { id: 1 } }}>
跳轉新增頁面
</Link>
history.push
this.props.history.push({
pathname: "/user/add",
//參數(shù)
query: { id: 1 },
});
獲參方法
this.props.location.query
三、路由state隱式參數(shù)
Link跳轉
<Link to={{ pathname: "/user/add", state: { id: 1 } }}>
跳轉新增頁面
</Link>
history.push
this.props.history.push({
pathname: "/user/add",
state: { id: 1 },
});
獲參方法
this.props.location.state
代碼DEMO
入口App組件
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Route path="/user" exact component={User} />
//動態(tài)路由
<Route path="/user/add/:id?" component={UserAdd} />
{/* <Redirect to="/user" /> */}
</BrowserRouter>
);
}
}
動態(tài)路由Demo
User組件
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class User extends Component {
render() {
return (
<div>
<div className="user">User</div>
{/* <Link to={{ pathname: "/user/add/1" }}>跳轉新增頁面</Link> */}
<button
onClick={() => {
// 1.
// this.props.history.push("/user/add/1");
// 2.
this.props.history.push({
pathname: "/user/add/1",
});
}}
>
跳轉新增頁面
</button>
</div>
);
}
}
UserAdd組件
import React, { Component } from "react";
export default class UserAdd extends Component {
render() {
console.log("this.props.match.params:", this.props.match.params);
return <div>UserAdd</div>;
}
}
路由query顯示參數(shù)Demo
User組件
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class User extends Component {
render() {
return (
<div>
<div className="user">User</div>
<Link to={{ pathname: "/user/add", query: { id: 1 } }}>
跳轉新增頁面
</Link>
<button
onClick={() => {
this.props.history.push({
pathname: "/user/add",
query: { id: 1 },
});
}}
>
跳轉新增頁面
</button>
</div>
);
}
}
路由state隱式參數(shù)Demo
User組件
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class User extends Component {
render() {
return (
<div>
<div className="user">User</div>
<Link to={{ pathname: "/user/add", state: { id: 1 } }}>
跳轉新增頁面
</Link>
<button
onClick={() => {
this.props.history.push({
pathname: "/user/add",
state: { id: 1 },
});
}}
>
跳轉新增頁面
</button>
</div>
);
}
}
到此這篇關于詳解React路由傳參方法匯總記錄的文章就介紹到這了,更多相關React路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解如何給React-Router添加路由頁面切換時的過渡動畫
這篇文章主要介紹了詳解如何給React-Router添加路由頁面切換時的過渡動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
React特征學習Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學習Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
關于react ant 組件 Select下拉框 值回顯的問題
這篇文章主要介紹了關于react ant 組件 Select下拉框 值回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react native實現(xiàn)往服務器上傳網(wǎng)絡圖片的實例
下面小編就為大家?guī)硪黄猺eact native實現(xiàn)往服務器上傳網(wǎng)絡圖片的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了React Diff原理的相關資料，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-08-08
Next.js實現(xiàn)react服務器端渲染的方法示例
這篇文章主要介紹了Next.js實現(xiàn)react服務器端渲染的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本篇文章主要介紹了深入掌握 react的 setState的工作機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了ahooks?useInfiniteScroll源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了react路由v6版本NavLink的兩個小坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10