React Router v5配置可选参数后无法获取journeyId该如何解决？

你使用useHistory获取路径参数的方式不符合react-router v5的API设计，useHistory返回的location对象仅包含原始路径字符串、查询参数等基础信息，不会自动解析路由配置中定义的路径参数，需要使用官方提供的专用API获取。

函数组件（推荐） #

react-router v5.1+ 提供了useParams钩子，可直接获取当前路由匹配到的所有路径参数：

// 首先导入钩子
import { useParams } from 'react-router-dom'

// 在Home组件内部使用
function Home() {
  const { journeyId } = useParams()
  // 可选参数未传递时journeyId为undefined，直接判断即可
  if (journeyId) {
    // 参数存在时执行对应逻辑
    console.log('获取到的journeyId：', journeyId)
  }
  // 其他组件逻辑
}

注意：需要确保当前组件处于Router上下文范围内，即被BrowserRouter/HashRouter包裹，或直接作为Route的component属性关联的组件，否则无法正常获取参数

类组件方案 #

如果使用类组件，可通过withRouter高阶组件包裹后从props中获取参数：

import { withRouter } from 'react-router-dom'
import React from 'react'

class Home extends React.Component {
  componentDidMount() {
    const { journeyId } = this.props.match.params
    if (journeyId) {
      console.log('获取到的journeyId：', journeyId)
    }
  }
  // 其他组件逻辑
}

// 用withRouter包裹后导出
export default withRouter(Home)

内容的提问来源于stack exchange，提问作者RRR uzumaki