浏览器后退按钮显示空白页面（创建React App + React Router）

Question

我正在使用Create React App和React Router。当我单击第1页上的链接（例如）时，它将成功导航到第2页。但是，当我单击Chrome中的“后退”按钮时，它将显示空白页。在控制台中进行的检查显示，CRA的默认index.html页面已加载，但始终无法呈现。如果有帮助，单击后退按钮后，浏览器中显示的URL是正确的。

我非常感谢您提供有关如何解决此问题的建议。

这是我的index.js文件中呈现的行。我相信这在任何CRA应用程序中都是标准的。

ReactDOM.render(<App />, document.getElementById("root"));

这是我从第1页单击以转到第2页的标签：

<a className={props.className} href={"/page2"}>
{props.children}
</a>

当我单击page2中的Chrome浏览器后退按钮时呈现的index.html是CRA https://github.com/facebook/create-react-app自动生成的index.html，它实际上只是一个空白页面。

问题在于<App />在执行后退操作后实际上不会被渲染（尽管它位于index.js中）。

我正在使用位于<App />组件内部的React路由器。

这是我的App组件的定义方式：

const App = () => {
return (
        <Router>
          <Switch>
            <Route
              path={
                "/page1"
              }
              render={(props) => {
                return <Page1 {...props} />;
              }}
            />
            <Route
              path={
                "/page2"
              }
              render={(props) => {
                return <Page2 {...props} />;
              }}
            />
            <Route
              path="/*"
              render={(props) => (
                <ErrorPage error={ErrorType.NOT_FOUND_ERROR} />
              )}
            />
          </Switch>
        </Router>
      );
    };