React 路由跳转及传参问题

最新推荐文章于 2024-09-08 23:30:29 发布

qq_36437172

最新推荐文章于 2024-09-08 23:30:29 发布

阅读量759

点赞数

分类专栏： React 文章标签：路由跳转传参 Link params/query/state push

原文链接：https://mp.csdn.net/postedit/100855505

版权

4 篇文章 0 订阅

订阅专栏

（一）DOM跳转

在需要跳转的页面导入import {Link} from 'react-router-dom'，在需要跳转的地方使用link标签的to属性进行跳转，路由配置文件中导出的那个类名相当于相当于router-view标签，在需要展示的地方引入这个类来展示。

1、在路由配置文件中配置路由

import Home from './containers/Home';
<Router>
  <Route path="/" exact component={Home}></Route>
</Router>

2、使用link标签进行跳转

import {Link} from 'react-router-dom'

<Link key={index} to={'/detail/' + item.get('id')}>
  ...
</Link>

（二）JS跳转

this.props.history.push(`/edit/${item.id}`)

（一）params传参

1、在路由配置中以/：的方式评接参数标识

import Detail from './pages/detail/loadable';
<Router>
  <Route path='/detail/:id' exact component={Detail}></Route>
</Router>

2、在路径后面将参数评接上(/参数)

this.props.history.push(`/edit/${item.id}`)

3、在被跳转页使用this.props.match.params.xxx(此处为id) 接收参数

componentDidMount() {
  const { id } = this.props.match.params
}

二、query传参

1、在router文件中配置为正常配置

2、在跳转时路径为一个对象{} 其中 pathname为路径, query为一个对象对象里是携带的参数

this.props.history.push({pathname: 'edit', query: { id: 1 }})

3、使用this.props.location.query接收参数

三、state传参

1.state 传参

<Link to={{pathname:'/detail', state: { id:item.get('id') }}}>
  ...
</Link>

2.如何接收数据呢？

this.props.location.state