Блог

Я использую 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>
  

index.html который отображается, когда я нажимаю кнопку возврата браузера Chrome со страницы 2, является index.html автоматически генерируется CRA: https://github.com/facebook/create-react-app , который, по сути, является просто пустой страницей.

Проблема в том, что <App /> на самом деле никогда не отображается после выполнения обратной операции (несмотря на то, что она находится в index.js ).

Я использую React router, который находится внутри <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>
      );
    };