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

时间:2020-11-04 20:49:35

标签: reactjs react-router create-react-app

我正在使用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>
      );
    };

0 个答案:

没有答案