React-Redux中ownProps无match/params问题排查求助

针对你遇到的Detail组件ownProps无match/params、无法获取路由id的问题，常见原因和解决方法如下：

1. connect高阶组件过滤了路由props #

当用Redux的connect包裹路由组件时，默认会过滤掉非Redux相关的props（包括路由的match、params）。解决方式二选一：

• 使用withRouter包裹：将路由props注入到组件中

  import { withRouter } from 'react-router-dom';
  import { connect } from 'react-redux';
  
  // 先connect再用withRouter包裹
  const ConnectedDetail = connect(mapStateToProps, mapDispatchToProps)(Detail);
  export default withRouter(ConnectedDetail);
  

• 修改connect的配置参数：关闭纯组件模式，保留所有props

  export default connect(mapStateToProps, mapDispatchToProps, null, { pure: false })(Detail);
  

2. 路由配置或跳转逻辑错误 #

• 检查Route的path是否正确定义了参数：

  // 正确写法，必须包含:id占位符
  <Route path="/detail/:id" component={Detail} />
  

• 确认跳转时传递了正确的id参数：

  // Link跳转示例
  <Link to={`/detail/${todo.id}`}>{todo.title}</Link>
  // 编程式跳转示例
  history.push(`/detail/${todo.id}`);
  

3. react-router-dom版本适配问题 #

如果使用的是react-router-dom v6，路由参数不再通过props传递，需改用useParams钩子获取：

import { useParams } from 'react-router-dom';

function Detail() {
  const { id } = useParams(); // 直接获取id参数
  // ...其他逻辑
}

v6中withRouter已被移除，钩子是官方推荐的获取路由信息的方式。

4. 嵌套路由场景的参数传递问题 #

如果Detail是嵌套路由的子组件：

• v5版本：需通过父路由的render props传递match

  <Route path="/parent/:id" render={({ match }) => (
    <Detail match={match} />
  )} />
  

• v6版本：嵌套路由需通过Outlet传递参数，或直接在子路由中定义参数，再用useParams获取。

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