在路径中使用参数后，两个组件在反应中混合

Question

在反应中，我使用了两个具有两个不同路径的组件。当我使用此代码路由组件时，它工作正常..

<Router>
<Provider store={store}>
        <Route exact path="/ID/" component={App}/>
        <Route  path="/login" component={Login}/>
        <Route path="/register" component={Register}/>
</Provider>
</Router>

但是，当我使用 ID 作为参数时，Register 和 Login 组件会在其路径“/register”和“/login”上与 App 组件混合，如图所示。在路径“/:ID”上一切正常。

<Router>
<Provider store={store}>
        <Route exact path="/:ID/" component={App}/>
        <Route  path="/login" component={Login}/>
        <Route path="/register" component={Register}/>
</Provider>
</Router>

Answer 1

您应该将路由包装在 <Switch> 中。它将呈现第一个匹配的路线并忽略任何后续匹配。

您还应该将 <Route exact path="/:ID/" component={App}/> 路由放在 <Switch></Switch> 包装器的最前面，因为 /login 和 /register 被认为是 /:ID 的匹配项.

<Router>
   <Provider store={store}>
      <Switch>
         <Route  path="/login" component={Login}/>
         <Route path="/register" component={Register}/>
         <Route exact path="/:ID/" component={App}/>
      </Switch>
   </Provider>
</Router>

在路径中使用参数后，两个组件在反应中混合

Two component are mixing in react after using param in path

reactjs

react-router

react-component