Question

我有一个app.js，其中我通过路由调用Home.js，Home.js由两个其他组件组成，分别称为Service和List，以便在单击Service时转到List。我有另一条路线，当我单击List中的任何内容时，它应该转到新组件DisplayData，但要转到Home.js，并且我必须手动刷新页面以显示DisplayData的内容。 / p>

 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

您的应用程序中应该只有一个路由器实例。另外，您应该从/service路径中删除完全相同的关键字，并使用Switch with Route path reordering，否则Home中的嵌套Routes将不会重新呈现

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

路由后反应路由器未刷新

1 个答案: