我想在两个不同的组件使用的路由。第一是侧边栏部件,其中链路是有....并且其中其他部件将基于由边栏提供的路线被呈现动态SHOWPANE组件。
以下是我已经试过...
//The App component
class App extends Component {
render() {
return (
<div className="App">
<div className="app-con">
<Sidebar />
<Showpane />
</div>
</div>
);
}
}
//The sidebar component
const sidebar = props => (
<>
<div className="sb-con">
<BrowserRouter>
<div>
<Link to="/" className="navs">
My Account
</Link>
<Link to="/history" className="navs">
Account History
</Link>
<Link to="/settings" className="navs">
Account Settings
</Link>
<Link to="/" className="navs">
Log out
</Link>
</div>
</BrowserRouter>
</div>
</>
);
//The showpane component
const showpane = props => (
<>
<div className="sp-con">
<BrowserRouter>
<div>
<Route path="/" component={Account} exact />
<Route path="/history" component={Acchistory} />
<Route path="/settings" component={Accset} />
</div>
</BrowserRouter>
</div>
</>
);
我预计,点击侧边栏组件链接后showpane组件必须进行渲染。
该BrowserRouter
是您的应用程序的路由器,因此应坐在你的应用程序的层次结构的顶部。
class App extends Component {
render() {
return (
<Router>
<div className="App">
<div className="app-con">
<Sidebar />
<Showpane />
</div>
</div>
</Router>
);
}
}
然后,您showpane会是这样的:
const showpane = props => (
<>
<div className="sp-con">
<div>
<Route path="/" component={Account} exact />
<Route path="/history" component={Acchistory} />
<Route path="/settings" component={Accset} />
</div>
</div>
</>
);
我还建议在侧边栏例如reacttraining's ReactRouter Docs期待,因为这是你仿佛是想为。