如何在其他路由器中管理路由器

时间:2019-12-31 01:31:20

标签: javascript reactjs react-router

我正在制作一个电子商店,主路由器正在工作,但是主路由器内部的路由器不工作。

主路由器:

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>
  )};

在代码末尾,我有这条路线来替换内部的页面(橙色):

enter image description here

当我单击以在此navlink中插入产品时,路由器在橙色屏幕中没有更改:

enter image description here

但是如果我重新加载页面,则会显示插入页面:

enter image description here

是否可以管理路由器内部的路由?

0 个答案:

没有答案