React中如何获取Route定义的可选路由参数

先说本质：你配置的:username?是可选路径参数，不管用哪个主流版本的React Router，取值逻辑都是一致的——访问不带参数的/All/Profiles时，拿到的username值为undefined；访问带参数的/All/Profiles/abc时，拿到的就是对应的abc字符串，不需要额外写特殊兼容逻辑。

React Router v5 实现方式 #

v5 会给被<Route>直接渲染的组件自动注入路由匹配对象，分组件类型取值：

• 类组件：直接从props的match.params下读取参数

  import { withRouter } from 'react-router-dom';
  class ProfileLookupPage extends React.Component {
    componentDidMount() {
      // 直接拿到可选的username参数
      const targetUsername = this.props.match.params.username;
    }
  }
  // 注意：如果组件是深层嵌套、没有被Route直接渲染，必须用withRouter高阶组件包裹才能拿到路由相关props
  export default withRouter(ProfileLookupPage);
  

• 函数组件（v5.1+版本）：直接调用useParamsHook取值

  import { useParams } from 'react-router-dom';
  function ProfileLookupPage() {
    const { username } = useParams();
    return <div>{username ? `查看${username}的资料` : '查看全部用户列表'}</div>
  }
  

React Router v6 实现方式 #

v6 重构了路由API，不再自动向组件注入路由props，统一通过Hook获取所有路由参数：

import { useParams } from 'react-router-dom';
function ProfileLookupPage() {
  // 解构直接拿可选参数，行为和路由配置完全匹配
  const { username } = useParams();
  return (
    <div>
      {username ? `正在加载${username}的个人资料` : '正在加载全部用户列表'}
    </div>
  )
}

如果是类组件适配v6，因为Hook不能直接在类组件里调用，可以写个简单的桥接高阶组件把参数值注入类组件props：

import { useParams } from 'react-router-dom';
function injectRouteParams(PageComponent) {
  return (props) => <PageComponent {...props} routeParams={useParams()} />
}

// 之后在类组件里直接取值即可
@injectRouteParams
class ProfileLookupPage extends React.Component {
  componentDidMount() {
    const username = this.props.routeParams.username;
  }
}

容易踩的坑 #

• 别把路径参数和查询参数搞混：如果访问的是/All/Profiles?username=abc这种带查询串的地址，参数不会进入路径参数的取值范围，需要单独通过useSearchParams（v6）或this.props.location.search（v5）解析获取。
• 可选参数不需要写额外的存在性判断兜底，路由层已经处理了无参场景，取值为undefined时直接做业务分支判断就行。

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