Как перенаправить на соответствующий компонент в реакции?

Question

Не могли бы вы сказать мне, как перенаправить на соответствующий компонент в реакции, если key is not found in local storage .it будет перенаправлен на /. Если ключ найден, то он переходит к соответствующему компоненту

, следуя приведенным ниже шагам

1) добавьте /pqr в URL. Следует перенаправить на /abc или загрузить Test2 компонент, потому что локальное хранилище имеет ключ = «a».Значение = abc.

В настоящее время я могу перенаправить на домашнюю страницу или /, если в локальном хранилище нет значения. Используется компонент более высокого уровня

У меня есть демонстрационное приложение здесь

https://codesandbox.io/s/00q3588z1v

Когда я запускаю приложение с таким URL-адресом «/ pqr», полный URL-адрес «https://00q3588z1v.codesandbox.io/pqr” ожидается, оно должно перенаправиться на /abc или загрузить * 1025»* компонент.

import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { Redirect, withRouter } from "react-router-dom";

    const HocApp = props => {
      console.log("dddddd");
      const user = localStorage.getItem("a") || "";
      console.log(user);

      return <Fragment>{user ? props.children : <Redirect to="/" />}</Fragment>;
    };

    export default withRouter(HocApp);

Answer 1

вам не нужен hocapp, вы можете добиться этого с помощью функции рендеринга в реагирующем маршрутизаторе, например:

        <Route
          path="/pqr"
          exact
          render={() => {
            const user = localStorage.getItem("a") || "";
            console.log("user", user);
            if (user) {
              return <Redirect to="/abc" />;
            }
            return <Test3 />;
          }}
        />