路由后反应路由器未刷新

时间:2019-03-22 06:30:05

标签: reactjs react-router

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

1 个答案:

答案 0 :(得分: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>
     );
}