1 回答
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
你不需要兩個(gè)<BrowserRouter />。<BrowserRouter />只需在頂級(jí)組件中定義一個(gè)即可。在react-router-dom v4+中,它<Route />就像一個(gè)常規(guī)組件,當(dāng)路徑與URL匹配時(shí),您可以在組件中使用它來(lái)渲染UI。
這是工作的codesandbox示例。確保不要放在exact你的父路由上<Route />,因?yàn)楫?dāng)你有像這樣的子路由時(shí),/main/messaging永遠(yuǎn)<Route exact path="/main" />不會(huì)渲染,因此該路由的子路由也無(wú)法渲染。
您保持<Main />組件不變,但從exact中刪除<Route path='/portal' />并更改<Portal />.
class Portal extends React.Component {
render = () => {
return (
<React.Fragment>
<div className="navmenu">
<NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>
<NavLink to="/portal/files" activeClassName="selected"></NavLink>
<NavLink to="/portal/payledger" activeClassName="selected"></NavLink>
</div>
<div className="apparea">
<Switch>
<Route path="/portal/messaging" component={Messaging}></Route>
<Route path="/portal/files" component={Files}></Route>
<Route path="/portal/payledger" component={PayLedger}></Route>
</Switch>
</div>
</React.Fragment>
);
}
}
添加回答
舉報(bào)
