反应是怎么实现路由传参的 - 行业资讯 - 肥雀云

反应是怎么实现路由传参的?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>一、动态路由

<强>跳转方法

链接, & lt; Link ={{,路径名:“/user/添加/1“,}}祝辞跳转新增页面& lt;/每日

历史。推动

, this.props.history.push (“/user/添加/1“);

<强>获参方法

this.props.match。参数

<强>二、路由查询显示参数

链接跳转

& lt; Link ={{,路径名:“/user/add",,查询:,{,id: 1,},}}祝辞　　,,,,跳转新增页面　　,& lt;每日;

历史。把

this.props.history.push ({ 　　,,,,,,路径名:,“/user/add", 　　,,,,,,//参数　　,,,,,,查询:,{,id: 1,}, 　　,,,,,});

<强>获参方法

this.props.location。查询

<强>三、路由国家隐式参数

链接跳转

& lt; Link ={{,路径名:“/user/add",,状态:,{,id: 1,},}}祝辞　　,,,,跳转新增页面　　,,,& lt;/每日

历史。把

this.props.history.push ({ 　　,,,,,,路径名:,“/user/add", 　　,,,,,,状态:,{,id: 1,}, 　　,,,,,});

<强>获参方法

this.props.location。国家

<>强代码演示

<强>入口应用组件

class App extends React.Component { 　　,使(){ 　　return 才能; 　　,,& lt; BrowserRouter> 　　,,,& lt; Route 路径=?user", exact 组件={User},/比; 　　,,,//动态路由　　,,,& lt; Route 路径=?user/添加/:id ?“,组件={UserAdd},/比; 　　,,,{/*,& lt; Redirect =?user",/祝辞,*/} 　　,,& lt;/BrowserRouter> 　　,,); 　　,} 　　}

动态路由演示

<强>用户组件

import 反应,,{,Component },得到“react"; 　　{import Link },得到“react-router-dom"; 　　　　export default class User extends Component { 　　,使(){ 　　return 才能; 　　,,& lt; div> 　　,,,& lt; div className=皍ser"祝辞User

　　　　,,,{/*,& lt; Link ={{,路径名:“/user/添加/1“,}}祝辞跳转新增页面& lt;/每日,*/} 　　,,,& lt;按钮　　,,,,onClick={(),=祝辞,{ 　　,,,,,//1。　　,,,,,//,this.props.history.push (“/user/添加/1“); 　　,,,,,//2。　　,,,,,this.props.history.push ({ 　　,,,,,,路径名:,“/user/添加/1“, 　　,,,,,}); 　　,,,,}} 　　,,,的在　　,,,,跳转新增页面　　,,,& lt;/button> 　　,,& lt;/div> 　　,,); 　　,} 　　}

<>强UserAdd组件

import 反应,,{,Component },得到“react"; 　　　　export default class UserAdd extends Component { 　　,使(){ 　　console.log才能(“this.props.match.params:“,, this.props.match.params); 　　return 才能;& lt; div> UserAdd