javascript - Redirect to specific page if localstorage value not found in react - Stack Overflow

admin管理员组

文章数量:1432436

I am using reactjs.

I have multiple following routes in my index.js file

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

initially when user goes to base URL suppose Http://localhost:3000

he should be redirected to Http://localhost:3000/Shops page if value of localstorage item is null

and also if user tries to visit other pages he should be redirected to the /Shops page.

One way of doing this is using HOC but further i'll be adding auth soo there i'll have to wrap the ponent in route with HOC like this

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

I dont know whether I can do like this

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

soo how can i achieve this without using HOC or how can I wrap 2 HOC for a single ponent.

Thanks.

I am using reactjs.

I have multiple following routes in my index.js file

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

initially when user goes to base URL suppose Http://localhost:3000

he should be redirected to Http://localhost:3000/Shops page if value of localstorage item is null

and also if user tries to visit other pages he should be redirected to the /Shops page.

One way of doing this is using HOC but further i'll be adding auth soo there i'll have to wrap the ponent in route with HOC like this

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

I dont know whether I can do like this

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

soo how can i achieve this without using HOC or how can I wrap 2 HOC for a single ponent.

Thanks.

• javascript
• reactjs
• http-redirect
• react-router
• higher-order-ponents

Share Improve this question Follow edited Jul 10, 2020 at 6:41 Joshua 3,20633 gold badges2626 silver badges4141 bronze badges asked Jul 10, 2020 at 5:25 Sagar ChavanSagar Chavan 25911 gold badge55 silver badges1616 bronze badges 4

• You can use nested HOCs HOC1(HOC2(HOC3(Component))) or you can use libraries like Compose from Redux to pose multiple HOC for single ponent – Sabesh Commented Jul 10, 2020 at 5:45
• then further how should I use it ? @Sabesh – Sagar Chavan Commented Jul 10, 2020 at 6:00
• You should be able to wrap the HOC while exporting your ponent like, export default ShopGuard(AuthGuard(Orders))) – Sabesh Commented Jul 10, 2020 at 6:05
• Nesting HOCs could help/work, but I wouldn't remend in-lining them where you're trying to use ponents; the ponent exports should be the already-decorated ponents. – Drew Reese Commented Jul 10, 2020 at 6:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

Create a custom Route ponent that can check localStorage and redirect to "/shop" if condition is (or isn't?) met.

const ShopGuardRoute = ({ ponent: 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" />
      );
    }}
  />
);

Usage

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

If you plan on adding an authentication check then auth-workflow may help.

I think you can just do something like this on all the required pages if(condition // your local storage null check) { history.push(/yourPath, dataIfAny); }

本文标签： javascriptRedirect to specific page if localstorage value not found in reactStack Overflow