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