问题如何与反应路由器渲染

Question

我有一个特定的案例，如果用户路由说主题/渲染，我需要给他展示一个单独的组件，而当用户路由到主题/ 10时，我需要给他展示另一个组件。我现在面临的问题是，即使执行主题/渲染，我也看到两个组件都在屏幕上渲染。另外，当用户路由到topic / math / 10时，我需要将他路由到其他页面。

这是我的App.js（默认App.js）中的路由部分

<div className="App">
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route exact path="/topics" component={Topics} />
      <Route exact path ="/topics/rendering" component={Description}/>
      <Route  exact path="/topics/:id" component={Topic} />
      <Route path="/topics/:description/:id" component={TopicExtended}/>
    </Router>
  </div>

Answer 1

您希望将Route组件包装在一个Switch组件中，以便一次仅渲染其中一个组件。

<div className="App">
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
      <Route path="/topics/rendering" component={Description} />
      <Route path="/topics/:id" component={Topic} />
      <Route path="/topics/:description/:id" component={TopicExtended} />
    </Switch>
  </Router>
</div>