Question

如果你能指出这个错误就会感激不尽，我已经疲惫不堪了。我正在使用反应路由器：

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

这完全没问题。然而，当我在div周围包裹另一个组件时，在这种情况下是一个StartupLogic组件，路由停止工作具体来说我正在使用：

dispatch(push("/login"));

当StartupLogic没有包裹div时，这意味着工作正常意味着网址栏更改为localhost:3000/login并且已安装LoginComponent。

当在div周围安装StartupLogic组件时，网址栏会更改为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>

你应该直接移动组件中的路由，并使用withRouter中的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>

包装时React路由器不路由

1 个答案: