重定向后React组件无法访问this.props.location问题求助

嘿，我之前也碰到过一模一样的问题！核心原因很简单：你的组件2没有接收到React Router自动注入的路由相关props，所以才拿不到location对象。下面给你拆解具体原因和解决办法：

1. 组件2不是路由直接渲染的目标组件 #

React Router只会给那些直接通过<Route>组件渲染的组件自动注入location、history这些路由props。举个例子，如果你的代码是这样的：

// 错误用法：组件2被嵌套在其他组件里渲染
<Route path="/test/new" component={ParentComponent} />

// 在ParentComponent里
render() {
  return <Component2 />;
}

这种情况下，组件2是作为普通子组件被渲染的，React Router不会给它注入路由props，自然this.props.location就是undefined。

解决办法：

• 直接把组件2设为<Route>的渲染目标：

<Route path="/test/new" component={Component2} />

• 或者在父组件里手动把路由props传递给组件2：

// 在ParentComponent中
render() {
  return <Component2 location={this.props.location} />;
}

2. 用withRouter高阶组件注入路由props #

如果组件2的结构没办法直接放在<Route>里（比如它是全局布局的一部分），那可以用React Router提供的withRouter来给它“补上”路由props。

操作步骤很简单：

1. 先导入withRouter：

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

2. 用它包裹你的组件2再导出：

class Component2 extends React.Component {
  constructor(props){ 
    super(props); 
    console.log(this.props.location); // 现在就能拿到正确的location对象了
  }
  // 组件其他逻辑...
}

// 关键：用withRouter包裹后导出
export default withRouter(Component2);

3. 检查路由基础配置 #

最后再确认一下你的路由基础配置有没有问题：

• 确保所有需要路由props的组件都包裹在<BrowserRouter>（或<HashRouter>）里面；
• 确认你使用的React Router版本和官方文档匹配，不同版本的API可能有细微差别。

按照上面的方法调整后，你就能正常访问this.props.location.state.event拿到重定向时传递的状态啦！

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