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

本文链接：https://blog.csdn.net/weixin_44246717/article/details/115580673

前言

路由肯定是单页面应用很重要的一部分，控制页面的跳转、传参等等，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中，刷新页面不会消失，但取数据时，需处理