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

Posted 2023-02-21

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

【英文标题】：Redirect to specific page if localstorage value not found in react

【发布时间】：2020-10-30 19:30:29

【问题描述】：

我正在使用 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页面如果localstorage项的值为null

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

这样做的一种方法是使用 HOC，但进一步我将添加 auth soo 我必须像这样使用 HOC 将组件包装在路由中

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

我不知道我是否可以这样做

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

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

谢谢。

【问题讨论】：

你可以使用嵌套的 HOCs HOC1(HOC2(HOC3(Component))) 或者你可以使用像 Compose 这样的库从 Redux 为单个组件组合多个 HOC

那么我应该如何使用它呢？ @Sabesh

您应该能够在导出组件时包装 HOC，例如 export default ShopGuard(AuthGuard(Orders)))

嵌套 HOC 可以帮助/工作，但我不建议在您尝试使用组件的地方内嵌它们；组件导出应该是已经装饰的组件。

【参考方案1】：

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>
    );

【讨论】：

我应该写 HandleRedirection() 函数是另一个文件吗？

是的。或者您可以直接在您的 index.js 路由文件中编写此代码。

是的，它确实有效。但进一步如果我想添加另一个条件来路由我应该怎么做。

目前我正在使用您上面给出的代码来检查本地存储中是否存在纬度和经度，如果它们不存在，我会将用户重定向到 baseURL/Shops 页面。此外，我还将添加身份验证。 Soo 我该如何做到这一点。

localStorage.getItem('latlong') ? ( ) : ( localStorage.getItem('userAuthentication') ? ( ) : ( ) ) />

【参考方案2】：

创建一个自定义 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 可能会有所帮助。

【讨论】：

@SagarChavan 是否有任何错误，或者只是没有按预期工作？我会尝试建立一个可以工作的代码框，因为我承认我只是根据常见的自定义路由组件模式编写的。

@SagarChavan Redirect 为我解决了问题，但也想测试 localStorage 逻辑。我确实注意到你 TitleCase 你的路径通常是小写的，所以也许这就是问题所在，如果你复制/粘贴路径不匹配，即"/Shops" !== "/shops"，当涉及到路径匹配时。我用一个正在运行的代码框更新了我的答案。

我试试看。

@SagarChavan 根据您在此 SO 帖子中其他地方的问题/cmets，添加了有关其他条件测试和身份验证流程的 cmets。

【参考方案3】：

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