React.js Redirect routing automatically

Question

I have this piece of code in my index.js :

const routing = (
<Router>
    <div>
        <Route path='/'>
            <Redirect to="/login" />
        </Route>
        <Route path="/login" component={Login} />
        <Route path="/signin" component={Signin} />
        <Route path="/home" component={Home} />
    </div>
</Router>
)

So what it should give me is, whenever I start it, it should land on http://localhost:3000/login or somewhere like it. What it does.

It gives me a login screen, where if I click on Login button it takes me to http://localhost:3000/home, which is also as I intended.

But whenever I directly try to access http://localhost:3000/home or http://localhost:3000/signin, it always takes me to http://localhost:3000/login.

What is the actual problem here? How this can be resolved ?

Martin Pechacek · Accepted Answer · 2019-08-22 10:48:42Z

1

Try use exact on <Route path='/'> and <Switch> instead of <div>:

import { Switch } from 'react-router-dom';

const routing = (
<Router>
    <Switch>
        <Route exact path='/'>
            <Redirect to="/login" />
        </Route>
        <Route path="/login" component={Login} />
        <Route path="/signin" component={Signin} />
        <Route path="/home" component={Home} />
    </Switch>
</Router>
)

I think there will be problem with partial matching of path. When you try directly access http://localhost:3000/home first match in router is / and it redirects you to login.

When you use exact in <Route> it matches absolute path. In example above you will be redirected only when you access http://localhost:3000/

<Switch> groups and iterate <Router> children elements and renders first match.

In your case (without <Switch>) it's rendering all <Routes>. Therefore is probably triggered redirect.

edited Aug 22, 2019 at 10:48

answered Aug 22, 2019 at 5:57

Martin Pechacek

1205 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maifee Ul Asad Over a year ago

Doesn't work. please see here

Martin Pechacek Over a year ago

I know it is improbable but cannot be problem with single quotation marks in <Route exact path='/'> ?

Martin Pechacek Over a year ago

what about <Switch> from 'react-router-dom' instead of <div>

Martin Pechacek Over a year ago

Edited. I am glad it helped you

Nick · Accepted Answer · 2019-09-28 18:07:37Z

1

You need to add the keyword exact to your routes to specify specific route paths according to the URL, or it will follow the line of succession. For example, if you visit the URL / it will load the login component as expected because that is the first route. However, if you visit the URL /home it will render the login component because it contains the path /. Adding the exact keyword means ONLY the URL / will hit that route. Any other routes, even if they contain / (which is every route) will not render that component because / is not the EXACT same route as /anything.

const routing = (
<Router>
    <Switch>
        <Route exact path='/'>
            <Redirect to="/login" />
        </Route>
        <Route path="/login" component={Login} />
        <Route path="/signin" component={Signin} />
        <Route path="/home" component={Home} />
    </Switch>
</Router>
)

edited Sep 28, 2019 at 18:07

answered Aug 22, 2019 at 5:57

Nick

1,4421 gold badge15 silver badges20 bronze badges

3 Comments

Maifee Ul Asad Over a year ago

Doesn't work. please see here

Nick Over a year ago

It looks like it's working fine when you login and can see the home page. The issue comes when you refresh the browser. I'm assuming you have authentication methods already because you're handling the onClick for login. Perhaps when you refresh the page, you are losing that authentication which is why you are forced to the login page again? It doesn't seem to be an issue with the Router itself.

Maifee Ul Asad Over a year ago

But, currently there is no authentication method, I am just using <Link> and playing around.

Collectives™ on Stack Overflow

React.js Redirect routing automatically

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related