React Router v4页面间传递Props失败，请求排查代码问题

嘿，我来帮你搞定这个React Router传props的问题！你的思路是对的，非父子组件确实可以通过路由的state来传递数据，但写法上有几个关键错误导致没生效，咱们一步步来修正：

问题核心原因 #

• React Router v4+ 不再支持直接导入browserHistory使用：你之前直接导入并调用browserHistory.push，但v4开始路由的history是由路由组件（比如HashRouter/BrowserRouter）管理的，直接导入的browserHistory和你用的HashRouter不是同一个实例，所以跳转后state没被正确传递。
• Component2 取值方式错误：你传递的state是存在location.state对象里，不是直接挂载在this.props上，所以this.props.id肯定拿不到值。
• 路由组件未注入路由props：如果组件不是直接被Route的component属性渲染（或者嵌套较深），可能拿不到history/location这些props，需要用withRouter高阶组件包裹。

修正后的代码示例 #

1. App.jsx 修正 #

去掉多余的browserHistory传递，Switch不需要手动传history，HashRouter会自动管理：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';

class App extends React.Component {
  render (){
    return (
      <div>
        <Switch>
          {/* 保留你的其他路由 */}
          <Route exact path='/home/step1' component={Component1}/>
          <Route exact path='/home/step2' component={Component2}/>
        </Switch>
      </div>
    )
  }
}

export default App;

2. Component1 修正 #

用this.props.history跳转，并用withRouter包裹组件以注入路由props：

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

class Component1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = { id: 123 } // 这里可以替换成你的实际id值
    this.navigateToStep2 = this.navigateToStep2.bind(this);
  }

  navigateToStep2(e){
    e.preventDefault();
    // 通过props.history跳转，传入state
    this.props.history.push({
      pathname: "/home/step2", 
      state: { id: this.state.id }
    });
  }

  render() {
    return (
      <button onClick={this.navigateToStep2}>跳转到Step2</button>
    )
  }
}

// 用withRouter包裹，确保组件能拿到history等路由props
export default withRouter(Component1);

3. Component2 修正 #

从this.props.location.state中取值，并做空值判断：

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

class Component2 extends React.Component {
  render(){
    // 从location.state中取id，添加空值判断避免报错
    const id = this.props.location.state?.id || '未获取到ID';
    return (
      <div>
        <h1>hello: {id}</h1>
      </div>
    )
  }
}

// 用withRouter包裹，确保能拿到location props
export default withRouter(Component2);

额外注意事项 #

• 如果你用的是React Router v6，写法会有较大变化（比如Switch换成Routes，withRouter被弃用，需要用useNavigate/useLocation钩子），但从你的代码来看应该是v4/v5版本，上面的方案完全适用。
• 不要混合使用HashRouter和browserHistory，两者是不同的路由模式，各自维护独立的history实例，会导致状态传递失败。
• 旧的context.router写法在v4+已经被官方弃用，不建议再使用，优先用withRouter或者路由组件自带的props。

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