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

【问题标题】：React Router won't render pushed page after first navigation第一次导航后，React Router 不会呈现推送的页面
【发布时间】：2019-10-14 23:20:04
【问题描述】：

我有一个 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");

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

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

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

这是因为你有不止一个Router，一旦你导航到inner-Router，其中没有定义"/"的home Route，所以没有要渲染的组件。 Routers 仅在它们自己的范围内以自上而下的模式进行通信。总体而言，您的整个应用程序实际上只需要一个Router，以便所有定义的Routes 都可以有效地相互通信。

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

【讨论】：