React router path issue

Question

user and user/:id working correct but other paths doesnt work and redirect to user/:id page...

<Router> <div> <TopMenu /> <div className="page-container" style={style.content}> <div className="page-content"> <Sidebar /> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/login" component={Login} /> <Route exact path="/user" component={ListUsers}/> <Route exact path="/user/:id" component={UserDetails} /> <Route exact path="/user/create" component={AddNewUser} /> <Route exact path="/user/roles" component={ListRoles} /> <Route exact path="/user/roles/:id" component={RoleDetails} /> <Route exact path="/user/role/create" component={AddNewRole} /> </Switch> </div> </div> </div> </Router>,

Austin Greco · Accepted Answer · 2017-10-03 18:37:40Z

These routes are the same, because you could have an id = 'create'

<Route exact path="/user/:id" component={UserDetails} /> <Route exact path="/user/create" component={AddNewUser} />

So you should match the more specific one first, so it matches before the variable one:

<Route exact path="/user/roles" component={ListRoles} /> <Route exact path="/user/role/create" component={AddNewRole} /> <Route exact path="/user/roles/:id" component={RoleDetails} /> <Route exact path="/user/create" component={AddNewUser} /> <Route exact path="/user/:id" component={UserDetails} />

Andy_D · Accepted Answer · 2017-10-03 18:37:18Z

Because :id could be anything, you need to put it after any static /user/whatever routes.

palsrealm · Accepted Answer · 2017-10-03 18:37:12Z

Change your switch to

<Switch> <Route exact path="/" component={Home} /> <Route exact path="/login" component={Login} /> <Route exact path="/user" component={ListUsers}/> <Route exact path="/user/create" component={AddNewUser} /> <Route exact path="/user/roles" component={ListRoles} /> <Route exact path="/user/role/create" component={AddNewRole} /> <Route exact path="/user/roles/:id" component={RoleDetails} /> <Route exact path="/user/:id" component={UserDetails} /> </Switch>

In your Switch the :id route was matching before the create and roles routes were tested.

Collectives™ on Stack Overflow

React router path issue

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related