使用React Router V4的嵌套路由不起作用

沙哈卜·汗（Shahab Khan）

我为页面创建了一个路由，在页面的那一侧我使用了4个组件。我给了这些组件的路径。在标题下拉框中，我给出了这些组件的链接，首先单击该路径即可。

但是在第二次单击中，URL更改了，但没有重定向。

const menu = (
      <Dropmenu>
        <Menu
          key="menu"
          style={{ backgroundColor: '#0f2037', borderRadius: '0' }}
        >
          <Menu.Item key="golive">
            <Link to={'/s/live'} style={{ color: '#fff' }}>
              <Icon type="video-camera" />
              &nbsp; Start Live Broadcast
            </Link>
          </Menu.Item>
          <Menu.Item key="mychannel" style={{ color: '#fff' }}>
            <Link to={'/s/profile'} style={{ color: '#fff' }}>
              <Icon type="user" />
              &nbsp; Manage Profile
            </Link>
          </Menu.Item>
          <Menu.Item key="settings">
            <Link to={'/s/account'} style={{ color: '#fff' }}>
              <Icon type="setting" />
              &nbsp; Account
            </Link>
          </Menu.Item>
          <Menu.Item
            key="logout"
            onClick={this.logoutCall}
            style={{ color: '#fff' }}
          >
            <Icon type="logout" />
            &nbsp; Logout
          </Menu.Item>
        </Menu>
      </Dropmenu>
    );
   
  <BrowserRouter>
     <Switch>
        <Route path="/s" component={GoLive} />
        <Route
          path="/s/profile"
          render={() => (
            <div>
              <ManageProfile descri={teprop} />
            </div>
          )}
        />
      </Switch>
  </BrowserRouter>

堆积Q

添加exact到路线将解决此问题：

    <Route path="/s" exact={true} component={GoLive} />
    <Route
      exact={true}
      path="/s/profile"
      render={() => (
         <div>
            <ManageProfile descri={teprop} />
         </div>
       )}
     />

所述Switch组件使得第一匹配的路由和/s在匹配/s/profile/。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。