如果在反应中找不到本地存储值，则重定向到特定页面

Question

我正在使用 reactjs。

我的 index.js 文件中有多个以下路由

<BrowserRouter>
      <App>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/Login" component={SignIn} />
          <Route exact path="/Sign-up" component={SignUp} />
          <Route exact path="/Orders" component={Orders} />
          <Route exact path="/Category" component={Category} />
          <Route exact path="/Shops" component={Shops} />
        </Switch>
      </App>
    </BrowserRouter>

最初当用户去基地时URL假设 http://localhost:3000

他应该被重定向到 http://localhost:3000/Shops page if localstorage item 值为 null

而且如果用户试图访问其他页面，他应该被重定向到 /Shops 页面。

这样做的一种方法是使用 HOC，但我将在此处添加 auth soo 我将不得不像这样使用 HOC 将组件包装在路由中

<Route exact path="/Orders" component={AuthGuard(Orders)} />

不知道能不能这样

<Route exact path="/Orders" component={AuthGuard, ShopGuard(Orders)} />

我如何在不使用 HOC 的情况下实现这一点，或者我如何为单个组件包装 2 个 HOC。

谢谢。

Answer 1

创建一个自定义 Route 组件，它可以检查 localStorage 并在条件满足（或不满足？）时重定向到“/shop”。

const ShopGuardRoute = ({ component: Component, ...props }) => (
  <Route
    {...props}
    render={routeProps => {
      const item = localStorage.getItem("key");
      
      // Do all your conditional tests here
      return item !== null ? (
        <Component {...routeProps} />
      ) : (
        <Redirect to="/shop" />
      );
    }}
  />
);

用法

<BrowserRouter>
  <App>
    <Switch>
      <ShopGuardRoute path="/Login" component={SignIn} />
      <ShopGuardRoute path="/Sign-up" component={SignUp} />
      <ShopGuardRoute path="/Orders" component={Orders} />
      <ShopGuardRoute path="/Category" component={Category} />
      <Route path="/Shops" component={Shops} />
      <Route path="/" component={Home} />
    </Switch>
  </App>
</BrowserRouter>

如果您计划添加身份验证检查，那么 auth-workflow 可能会有所帮助。

Answer 2

function HandleRedirection() {
    const RedirectToShop = ({ component: Component, ...rest }) => {
        return (
            <Route
                {...rest}
                render={(props) =>
                    localStorage.getItem('user') ? (
                        <App>
                            <Component {...props} />
                        </App>
                    ) : (
                            <Redirect to="/shop" />
                        )}
            />
        );
    };
    return (
                <BrowserRouter basename={`/`}>
                        <Switch>
                            <Route path={`/shop`} component={Shops} />
                            <RedirectToShop exact path={`/login`} component={Signin} />
                            <RedirectToShop exact path={`/order`} component={Order} />
                            <RedirectToShop exact path={`/category`} component={Category} />
                            <Redirect to="/shop" />
                        </Switch>
                </BrowserRouter>
    );
}

Answer 3

我想你可以在所有需要的页面上做这样的事情 if(condition // your local storage null check) { history.push(/yourPath, dataIfAny); }

如果在反应中找不到本地存储值，则重定向到特定页面

Redirect to specific page if localstorage value not found in react

javascript

reactjs

redirect

react-router

higher-order-components