Reactjs 路由后反应路由器未刷新

我有一个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>
 );
}

App.js
服务
Home.js
常量Home=（）=>{
返回(
);
}

您的应用程序中应该只有一个路由器实例。此外，您还应该从

/service

路径中删除确切的关键字，并使用

开关对路由路径重新排序

，否则不会重新呈现主目录中的嵌套路由

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>
     );
}

const Home=（）=>{
返回(
);
}

如果我从Home.js中删除路由器，则路由没有发生，只有url被更改并转到另一个页面，但没有呈现数据，我需要列表组件的数据与服务呈现在同一页面中，（左侧的服务，单击后，右侧的列表）.你也做了我在answryes中提到的其他更改了吗？是的，我先对app.js进行了更改，然后从Home.js中删除了路由器，但我这么做的时候，列表组件没有得到渲染。你也从服务路径中删除了确切的关键字？？好的，因此，链接到

列表

组件路径的逻辑是在服务中，在这种情况下，您还应该将服务作为路由呈现