Блог

У меня есть этот конкретный случай, когда, если пользователь перенаправляет, скажем, темы / рендеринг, мне нужно показать ему отдельный компонент, а когда пользователь перенаправляет к темам / 10, мне нужно показать ему другой компонент. Проблема, с которой я сталкиваюсь прямо сейчас, заключается в том, что даже когда я делаю темы / рендеринг, я вижу, что оба компонента отображаются на экране. Также, когда пользователь переходит к темам / 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>
  

Вы хотите обернуть 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>
  

вы должны поместить теги маршрута внутри тега Switch

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

но сначала импортируйте его import {Switch} from 'react-router-dom'