反应路由器在包裹时不路由

Question

如能指出错误，将不胜感激，我好累。我正在使用 React 路由器：

<Router history={history}>
    <div>
        <Route exact path="/" component={SplashScreen} />
         <Route path="/login" component={LoginComponent} />
      </div>
</Router>

这很好用。然而，当我将另一个组件包裹在 div 周围时，在本例中是 StartupLogic 组件，路由停止工作具体来说，我正在使用：

dispatch(push("/login"));

当 StartupLogic 没有环绕 div 时，这工作正常意味着 url 栏变为 localhost:3000/login 并且 LoginComponent 被安装。

当 StartupLogic 组件安装在 div 周围时，url 条变为 localhost:3000/login 但 LoginComponent 不呈现，我被困在那里看着SplashScreen.

StartupLogic 组件：

class AppDelegate extends Component {

  componentDidMount(){
    this.props.getX().then(allCountries => {
      this.props.getY().then(res => {

        setTimeout(() => {

          console.log(this);
          debugger;
          this.forceUpdate();
        },5000)

      });
    });
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

Answer 1

而不是像

那样将路由包装在一个组件中

<Router history={history}>
    <StartupLogic >
      <div>
        <Route exact path="/" component={SplashScreen} />
         <Route path="/login" component={LoginComponent} />
      </div>
    <StartupLogic >
</Router>

您应该直接在组件内移动路由，并使用 WrappedRoute 中的 withRouter 获取路由参数，例如

const StartupLogic = () => {
   return (
      <div>
        <Route exact path="/" component={SplashScreen} />
         <Route path="/login" component={LoginComponent} />
      </div>
   )
}

export default withRouter(StartupLogic);

并像

一样使用它

<Router history={history}>
    <StartupLogic />
</Router>

反应路由器在包裹时不路由

React router not routing when wrapped

reactjs

react-router

redux-router