Перенаправить на страницу с указанием c, если значение localstorage не найдено в реакции

Question

Я использую reactjs.

У меня есть несколько следующих маршрутов в моем индексе. 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 .

Один из способов сделать это - использовать HO C, но дальше я добавлю auth soo там, я нужно обернуть компонент в маршрут с помощью HO C вот так

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

Я не знаю, смогу ли я сделать это

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

так, как я могу достичь этого без использования HO C или как обернуть 2 HO C для отдельного компонента.

Спасибо.

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>

If you plan on adding an authentication check then 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); }