Реактивный маршрутизатор не обновляется после маршрутизации

Question

У меня есть app.js, в котором я вызываю Home.js через маршрутизацию, Home.js состоит из двух других компонентов, называемых Service и List, так что при нажатии на Service происходит переход к List. У меня есть другой маршрут, при котором, когда я щелкаю по любому содержимому в Списке, он должен перейти к новому компоненту DisplayData, но он идет к Home.js, и мне нужно вручную обновить страницу для отображения содержимого DisplayData .App.js

 App.js 
 <Router>
  <div className="App">
    <Link to="/services"><button className="btn btn-primary m-3">Services</button></Link>
    <Route path="/services" exact component={Home}/>
    <Route path="/service/:service_name/requests" exact component={DisplayData}/>
  </div>
  </Router>

 Home.js
 const Home = () => {
 return(
 <Router>
 <div className="main-wrapper">
  <div className="service-wrapper">
    <Service/>
  </div>
  <div className="list-wrapper">
    <Route path="/service/:service_name" exact component={List}/>
  </div>
 </div>
 </Router>
 );
}

Answer 1

В вашем приложении должен быть только один экземпляр Router. Также вы должны удалить точное ключевое слово из /service path и использовать Switch with Route path reordering, иначе вложенные маршруты в Home не будут перерисованы

App.js

 <Router>
  <div className="App">
    <Link to="/services"><button className="btn btn-primary m-3">Services</button></Link>
    <Switch>
        <Route path="/service/:service_name/requests" exact component={DisplayData}/>
        <Route path="/services" component={Home}/>
    <Switch>
  </div>
</Router>

Home.js

 const Home = () => {
    return(
         <div className="main-wrapper">
          <div className="service-wrapper">
            <Route component={Service}/>
          </div>
          <div className="list-wrapper">
            <Route path="/service/:service_name" exact component={List}/>
          </div>
        </div>
     );
}