Reactjs 反应路由器路径问题

用户和用户/：id工作正常，但其他路径不工作，并重定向到用户/：id页…

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

,

将开关切换到

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

在测试

创建

和

角色

路由之前，交换机中的

：id

路由已匹配。

将交换机更改为

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

---

在您的交换机中，在测试

创建
和
角色
路由之前，
:id
路由是匹配的。
因为
:id
可以是任何东西，所以您需要将它放在任何静态
/user/任何
路由之后。
因为
:id
可以是任何东西，您需要将它放在任何静态
/user/任何
路由之后。
这些路由是相同的，因为您可以有一个
id='create'

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



因此，您应该首先匹配更具体的一个，因此它在变量1之前匹配：

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

这些路由是相同的，因为您可以有一个
id='create'

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



因此，您应该首先匹配更具体的一个，因此它在变量1之前匹配：

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