React something is wrong with router

Question

I'm new to react redux and building my first web app.

So I created Router and added the specific pages:

   <Switch>
                <Route path="/">
                    <Home />
                </Route>
                <Route path="/Info/:id/:name/:type">
                    <Info />
                </Route>
            </Switch>

When I have path="/" and path="/Info/:id/:name/:type", it does not work. But when I have something like path="/Home", path="/Info/:id/:name/:type", it works very well. Am I doing something wrong?

by not working, you mean you cannot navigate to the home page? — carrany
– carrany, Commented Apr 5, 2020 at 6:59

akshay karande · Accepted Answer · 2020-04-06 09:15:20Z

1

Pass 'exact' as a prop:

<Route path="/" exact><Home /></Route>

edited Apr 6, 2020 at 9:15

answered Apr 5, 2020 at 7:07

akshay karande

1667 bronze badges

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

Comments

Abhishek Kulshrestha · Accepted Answer · 2020-04-05 07:05:51Z

0

So by the nature of it, route is matched with the first path. what you should do is use 'exact' in your first path.

 <Switch>
            <Route exact path="/">
                <Home />
            </Route>
            <Route path="/Info/:id/:name/:type">
                <Info />
            </Route>
        </Switch>

answered Apr 5, 2020 at 7:05

Abhishek Kulshrestha

1,4734 gold badges18 silver badges32 bronze badges

1 Comment

Barun Patro Over a year ago

hey @Abhishek.. Switch and exact are basically alternatives to each other. They don't actually need to work together in this case. even though it would work

Barun Patro · Accepted Answer · 2020-04-05 07:16:28Z

0

Like i always remind my students.. <Switch /> and exact are basically alternatives for each other..

If you have more than 2 or 3 routes.. go for <Switch/>. exact prop is only good enough for one time use only.

I have 2 answers for you.

<Route exact path="/">
    <Home />
</Route>
<Route path="/Info/:id/:name/:type">
    <Info />
</Route>

Just change the order of routes.. because Switch only takes the first match.

<Switch>
    <Route path="/Info/:id/:name/:type">
        <Info />
    </Route>
    <Route path="/">
        <Home />
    </Route>
</Switch>

answered Apr 5, 2020 at 7:16

Barun Patro

9704 silver badges13 bronze badges

Collectives™ on Stack Overflow

React something is wrong with router

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related