我正在制作一个电子商店,主路由器正在工作,但是主路由器内部的路由器不工作。
主路由器:
function App() {
return (
<Router>
<div className="app">
<Route exact path={["/","/login", "/register"]}>
<TopBar/>
</Route>
<div className="content-main-page">
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/admin" component={Admin}/>
<Route component={NotFound}/>
</Switch>
</div>
<Route exact path={["/","/login", "/register"]}>
<BottomBar/>
</Route>
</div>
</Router>
);
}
当我在"/", "/login", "/register", "/admin"
中导航时,效果很好。但是问题是当我在/admin
里面时,我还有另一个路由器:
render() {
return (
<div className="admin-page">
<div className="admin-side-bar">
<div className="admin-option">
<div onClick={() => this._closeOrOpen('productsOpen')}>PRODUTOS</div>
<div className={"admin-option-container" + (this.state.productsOpen ? ' activate' : '')}>
<div className="admin-option-item">LIST</div>
<div className="admin-option-item"><NavLink to="/admin/addItem">INSERT</NavLink></div>
</div>
</div>
<div className="admin-option">
<div onClick={() => this._closeOrOpen('usersOpen')}>USUARIOS</div>
<div className={"admin-option-container" + (this.state.usersOpen ? ' activate' : '')}>
<div className="admin-option-item">LIST</div>
<div className="admin-option-item"><NavLink to="/admin/addItem">INSERT</NavLink></div>
</div>
</div>
</div>
<div className="admin-panel">
<Router>
<Route exact path="/admin" component={AdminMainPage}/>
<Route path="/admin/addItem" component={AdminInsertItem}/>
</Router>
</div>
</div>
)};
在代码末尾,我有这条路线来替换内部的页面(橙色):
当我单击以在此navlink中插入产品时,路由器在橙色屏幕中没有更改:
但是如果我重新加载页面,则会显示插入页面:
是否可以管理路由器内部的路由?