Question

我有一个React Web应用程序，我正在尝试使用React Router在屏幕之间导航。

这是App组件中的路由配置：

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <MainScreen />
          </Route>

          <Router path="/about">
            <About  />
          </Router>
        </Switch>
      </Router>
    );
  };

在MainScreen中的某个地方，我导航到About组件，并且它可以正常工作：

this.props.history.push("/about");

但是当我尝试通过按“ /”从MainScreen页面导航回到About时，它会更改浏览器中的URL，但不会呈现MainScreen（我一直看到About页面。

导出withRouter()和MainScreen时都在使用About。

Answer 1

这是因为您有多个Router，在其中导航到内部Router后，其中没有为"/"定义的本地路由，因此没有任何要渲染。 Routers仅以自上而下的模式在自己的范围内进行通信。在宏伟的方案中，您实际上对于整个应用程序只需要一个Router，以便所有已定义的Routes可以有效地相互通信。

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={MainScreen}>
          <Route path="/about" component={About}/>
        </Switch>
      </Router>
    );
  };

第一次导航后，React Router不会呈现推送的页面

1 个答案: