Question

请告诉我key is not found in local storage时如何重定向到相应组件。它将重定向到/。如果找到了密钥，则它将转到相应组件

按照以下步骤

1）在url中添加/pqr。由于本地存储具有以下内容，它应重定向到/abc或加载Test2组件键=“ a”。值= {abc。

当前，我可以重定向到home或/，如果本地存储中没有任何值。使用更高的oder组件

我在这里有一个演示应用程序

当我使用此网址“ / pqr”完整网址“ https://00q3588z1v.codesandbox.io/pqr”运行应用程序时 预期它应该重定向到/abc或加载/Test2组件。

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，可以通过在React Router中使用渲染功能来实现它，如下所示：

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

如何在响应中重定向到各个组件？

1 个答案: