Как перенаправить на домашний экран в реакции?

Question

Не могли бы вы сказать мне, как перенаправить на домашний экран в реакции, если key is not found in local storage.У меня есть демонстрационное приложение здесь

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

Когда я запускаю приложение с этим URL-адресом «/ abc» полный URL-адрес «https://00q3588z1v.codesandbox.io/abc” Это дает мне эту ошибку Не удается прочитать свойство»toUpperCase 'of null

Поскольку в этом ключе нет значения. Мне нужно перенаправить на / или Test компонент

Answer 1

по моему мнению, вам нужно установить условие, которое вернет вас обратно к '/', если значение в localStorage пусто

if (localStorage.getItem("a")) {
     return (
<div>
  test2
  {localStorage.getItem("a").toUpperCase()}
</div>
     )
} else {
    return <Redirect to="/" />
 }

Answer 2

componentDidMount в компоненте Test установит a в localStorage на "abc", но пользователь может не посетить эту страницу до посещения Test2, поэтому вам нужно проверить, если aна самом деле устанавливается перед использованием строкового метода.

Если вы хотите перенаправить на /, вы можете визуализировать Redirect компонент с to prop.

render() {
  console.log("Test1 admin");
  const a = localStorage.getItem("a");

  return (
    <div>
      test2
      {a ? a.toUpperCase() : <Redirect to="/" />}
    </div>
  );
}