React-Router中Link跳转后props.match.params.blogId未定义该如何解决？

我来帮你分析下问题根源和可行的解决办法：

问题核心原因 #

你在Route中使用component={() => <BlogEdit editBlog={this.editBlog}/>}的方式渲染组件时，React Router自动注入的match、location等路由相关props并没有传递给BlogEdit——因为你是手动创建组件实例，没有把路由的props传递进去。另外，你的Route同时写了handler和component，这在多数Router版本里属于冗余写法，甚至可能引发冲突。

几种可行的解决方案 #

1. 手动传递路由props给组件

修改你的Route配置，在回调函数中接收路由props，再通过扩展运算符传递给BlogEdit：

<Route 
  path="/BlogEdit/:blogId" 
  component={(props) => <BlogEdit {...props} editBlog={this.editBlog}/>} 
/>

这里的props包含了match、location等路由对象，传递完成后，你就能在BlogEdit中正常访问this.props.match.params.blogId了。

2. 使用render属性替代component（React Router v4+推荐）

如果你的项目使用的是React Router v4及以上版本，更推荐用render属性传递额外props，它不会像component回调那样每次渲染都创建新组件实例，性能更优：

<Route 
  path="/BlogEdit/:blogId" 
  render={(props) => <BlogEdit {...props} editBlog={this.editBlog}/>} 
/>

3. 用withRouter高阶组件包装目标组件

如果希望不管以何种方式渲染BlogEdit，它都能自动获取路由props，可以用withRouter高阶组件对其进行包装：
首先导入withRouter：

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

然后在导出BlogEdit时完成包装：

export default withRouter(BlogEdit);

这样即便你继续使用component={() => <BlogEdit editBlog={this.editBlog}/>}的写法，BlogEdit也能正常拿到match等路由props。

额外检查项 #

• 确认你的React Router版本：如果是v3及更早版本，handler是旧版写法，v4+已不再使用，建议统一使用对应版本的标准API。
• 先验证blog.js中的this.blogId是否有正确赋值，可以在跳转前打印该值，确保路径中的参数是有效的。

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