代码之家 › 专栏 › 技术社区 › user944513

如何将授权url重定向到react中的各个组件?

react-router reactjs

0

user944513 · 技术社区 · 7 年前

您能告诉我如何重定向到react if中的各个组件吗 key is not found in local storage .它将重定向到 / .如果找到钥匙,则钥匙会转到相应的部件

遵循以下步骤

1)添加 /pqr 在url中。它应该重定向到 /abc 或装载 Test2 组件,因为本地存储 key=a.值= abc .

目前我可以重定向到家中或 / 如果本地存储中没有价值。使用高阶组件

我这里有一个演示应用

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

当我用这个url运行应用程序时——完整的url 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);

0 回复 | 直到 7 年前

1

0

stasdes 7 年前

您不需要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 />;
          }}
        />