CODEWITHSUNDEEP
reactjspathrouter
Bora Kılıçoğlu
Bora Kılıçoğlu

Reputation: 1

React router path issue

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>,

Upvotes: 0

Views: 92

Answers (3)

Austin Greco
Austin Greco

Reputation: 33554

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} />

Upvotes: 3

Andy_D
Andy_D

Reputation: 4228

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

Upvotes: 2

palsrealm
palsrealm

Reputation: 5243

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.

Upvotes: 1

Related Questions