如何在react中重定向到主屏幕？

Question

你能告诉我如何在react if key is not found in local storage中重定向到主屏幕吗？我在这里有一个演示应用

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

当我用这个url“/abc”完整的url“https://00q3588z1v.codesandbox.io/abc”运行应用程序时，它给我这个错误:无法读取属性'toUpperCase‘的null

因为该键中没有值，所以我需要重定向到/或重定向到Test组件

​

​

Answer 1

Test组件中的componentDidMount会将localStorage中的a设置为"abc"，但用户在访问Test2之前可能不会访问此页面，因此在对其使用字符串方法之前，您需要检查是否实际设置了a。

如果你想重定向到/，你可以使用to属性来呈现一个Redirect组件。

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

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

Answer 2

在我看来，您需要设置一个条件，如果localStorage中的值为空，该条件将使您返回到'/‘

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