0

如果您能指出错误，将不胜感激，我很疲惫。我正在使用这样的反应路由器：

<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>
    );
  }
}
4

1 回答 1

1

而不是将路由包装在组件中，例如

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

您应该直接在组件内移动 Routes 并使用类似withRouter的方式获取 Route 参数WrappedRoute

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

export default withRouter(StartupLogic);

并像使用它一样

<Router history={history}>
    <StartupLogic />
</Router>
于 2018-01-31T11:43:42.327 回答