react router路由跳转传参，react-router-dom基本使用+4种传参方式

前言

路由肯定是单页面应用很重要的一部分，控制页面的跳转、传参等等，vue中有vue router，当然react中有react router，都是官方所推荐的插件，如果你刚学react，或者是你在公司使用react，但对react router路由的使用不是很熟练的，那么本文能带给你一定的收获

一、使用场景

当你需要从一个页面，传递某些数据给另一个页面时，你可以通过路由传参来实现

二、基本使用

路由配置

{
     /* exact精准匹配，但url末尾加/也可以匹配到；配合strict，来解决exact末尾加/能匹配的问题 */}
<Route exact strict path="/index" component={
     Demo1} />

跳转方式

// html:
<Link to="/index">demo1</Link>
// js:
this.props.history.push('/index')

三、4种路由传参方式

router路由配置

import React from 'react'
import {
     
  // HashRouter as Router,
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom'
import MainLayout from '../compotents/layout/MainLayout' // 嵌套路由使用
import Home from '../containers/home'
import NotFound from '../containers/404'
import Demo1 from '../containers/demo1'
import Demo2 from '../containers/demo2'
import Demo3 from '../containers/demo3'
import Demo4 from '../containers/demo4'
import Demo5 from '../containers/demo5'
import Demo6 from '../containers/demo6'
import Demo7 from '../containers/demo7'

const BasicRouter = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={
     Home} />
      <Route
        path="/index"
        // 嵌套路由
        render={
     () => (
          <MainLayout>
            {
     /* exact精准匹配，但url末尾加/也可以匹配到；配合strict解决exact末尾加/能匹配的问题 */}
            <Route exact strict path="/index" component={
     Demo1} />
            <Route exact path="/index/demo2" component={
     Demo2} />
            <Route exact path="/index/demo3" component={
     Demo3} />
          </MainLayout>
        )}
      />
      <Route path="/demo4" component={
     Demo4} />
      <Route exact path="/demo5" component={
     Demo5} />
      <Route exact path="/demo6/:id" component={
     Demo6} />
      {
     /* ?代表该参数可有可无 */}
      <Route exact path="/demo7/:pId?/:age" component={
     Demo7} />
      <Route path="*" component={
     NotFound} />
    </Switch>
  </Router>
)

export default BasicRouter

---

1、state传参

特点：
1、BrowserRouter(history)模式下，刷新页面参数不消失，参数不会在地址栏显示，因为state保存在history对象中
2、HashRouter(hash)模式下，刷新页面参数消失！！！参数不会在地址栏显示

路由配置

<Route exact path="/index/demo2" component={
     Demo2} />

跳转方式

// html:
<Link to={
     {
      pathname: '/index/demo2', state: {
      id: 2 }}}>demo2</Link>
// js:
this.props.history.push({
      pathname: '/index/demo2', state: {
      id: 2 }})

获取值

this.props.location.state.id

---

2、query传参

特点：刷新页面参数消失，参数不会在地址栏显示

路由配置

<Route exact path="/index/demo3" component={
     Demo3} />

跳转方式

// html:
<Link to={
     {
      pathname: '/index/demo3', query: {
      id: 1 } }}>demo3</Link>
// js:
this.props.history.push({
      pathname: '/index/demo3', query: {
      id: 1 } })

获取值

this.props.location.query.id

---

3、params传参（动态路由）

特点：刷新页面参数不消失，参数会在地址栏显示

路由配置

<Route exact path="/demo6/:id" component={
     Demo6} />

跳转方式

// html:
<Link to={
     '/demo6/1'}>demo6</Link>
// js:
this.props.history.push('/demo6/1')

获取值

this.props.match.params.id

---

4、search传参

特点：刷新页面参数不消失，参数会在地址栏显示

路由配置

<Route path="/demo4" component={
     Demo4} />

跳转方式

// html:
<Link to={
     '/demo4?id=1&type=5'}>demo4</Link>
// js:
this.props.history.push('/demo4?id=1&type=5')

获取值

this.props.location.search // ?id=1&type=5; 获取的是字符串，需处理

四、总结

• 你可能在不同的情况，使用不同的传递方式
• state传参：BrowserRouter(history)模式下，刷新页面不消失；而HashRouter(hash)模式下，刷新页面会消失，但都不会暴露在url中
• query传参：虽然不会暴露在url中，但刷新页面会消失
• params传参（动态路由）：可读性高，便于维护，当另一个页面一定需要某数据时，推荐使用
• search传参：会暴露在url中，刷新页面不会消失，但取数据时，需处理

---

代码下载(p-react-router分支)：https://gitee.com/staraliang/react17-app/tree/p-react-router

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！

你可能感兴趣的文章：

• React Hook的使用
• React与Vue的区别和对比