Reagieren Router Pfad Problem

Question

Benutzer und Benutzer /: id korrekt aber andere Wege arbeiten nicht funktioniert und Umleitung auf Benutzer /: id Seite ...

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

Answer 1

Ändern Sie Ihre Schalter auf

<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 Ihrem Switch war die :id Route passend, bevor die create und roles Routen getestet wurden.

Answer 2

Da :id könnte alles sein, müssen Sie es setzen nach jede statische /user/whatever Routen.

Answer 3

Diese Strecken sind gleich, weil Sie eine id = 'create'

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

haben könnte So sollten Sie die speziellere überein ersten, so dass es passt vor der Variablen ein:

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