CODEWITHSUNDEEP
reactjsreact-reduxreact-router
Dzmitry Shuhayeu
Dzmitry Shuhayeu

Reputation: 141

Complex routing with react-router

When a user enters in browser any of the pages, he should be immediately redirected to the main page, after which a request will be sent and then determine where to direct the user.

Let me give you an example: The user goes to the page '/page1', and he should be immediately redirected to the main page - '/'. Page 1 should not be rendered at that moment. On the main page, a request is sent in asynchronous mode, and then the user must be redirected to the same page - '/page1'.

How can i implement this logic?

Upvotes: 0

Views: 226

Answers (1)

Mohaimin
Mohaimin

Reputation: 702

You can create PrivateRoute component which will redirect on based on some permission logic like this

function PrivateRoute({ children, ...rest }) {
  const hasPermission = // check token or howeeveryou can authenticate;

  return (
    <Route
      {...rest}
      render={({ location }) =>
        hasPermission ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}

function Routes() {
  return (
     <Router>
        <Switch>
          <Route path='/' .../>
          <PrivateRoute path="/page1">
            <Page1/>
          </PrivateRoute>
          <PrivateRoute path="/page12">
            <Page2/>
          </PrivateRoute>
          ...
        </Switch>
     </Router>
  );
}

Upvotes: 1

Related Questions