score:3

Accepted answer

You want to wrap the Route components in a Switch component so that only one of them will be rendered at a time.

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

score:0

you should put Route tags inside Switch tag

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

but import it first import {Switch} from 'react-router-dom'


Related Query

More Query from same tag