How to correctly implement Route for this case?

Question

React

How to redirect (not let go) by url "/auth" ?
There is a "/auth" route that renders a component that has its own routes.

<Route 
            path={"/auth"}
            component={AuthPage}
          />

If I go to the "/auth" route it renders a blank page accordingly. I tried to solve this by redirecting a specific route after adding the routes in the AuthPage component - it doesn't work correctly.
How to solve this problem?

Answer 1

You need to decide on the case when the url /authshould be resolved by a redirect. For example - when the user is already authorized. Next, you need to create a type wrapper component:

const PublicRoute = ({component: Component, isLogin, ...rest}) => {
    return (
        <Route {...rest} render={props => (
            isLogin ?
                <Redirect to="нужный урл" />
            : <Component {...props} />
        )} />
    );
};

Usage

<BrowserRouter>
  <Switch>
    <PublicRoute component={SignIn} isLogin={...} path="/auth" exact />
  </Switch>
</BrowserRouter>