CODEWITHSUNDEEP
reactjsreact-router
anhtv13
anhtv13

Reputation: 1808

ReactJs route path including id returns incorrect components

I try to use Route to redirect to a component but it returns both components as below.

enter image description here

When it comes to /test/new i just want to display only NewRequest component.

I think the problem is the /:id/ but don't know how to fix it.

Here is my code for Route:

<div>                
    <Route exact path='/test/' render={(props) => <ViewList />} ></Route>
    <Route path='/test/new/' render={(props) => <NewRequest />} ></Route>
    <Route path='/test/:id/' render={(props) => <ViewDetail />} ></Route>
</div>

My question is how to fix the Route so it returns only NewRequest component? Thank you.

Upvotes: 0

Views: 32

Answers (1)

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

Wrap your Route components in Switch.

import { Route, Switch } from "react-router-dom";

<Switch>
  <Route exact path='/test' component={ViewList} />
  <Route path="/test/new" component={NewRequest} />
  <Route path="/test/:id" component={ViewDetail} />
</Switch>

Upvotes: 2

Related Questions