反应路由器 v4 的嵌套路由不起作用

Question

我已经为我使用的 page.In 页面创建了一条路线 4 component.I 已经为这些 component.In header 下拉列表提供了路径给定这些组件的链接，第一次点击路径是改变的。

但在第二次点击时 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>

Answer 1

在路由中添加exact即可解决问题：

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

Switch 组件呈现第一个匹配的路由并且 /s 在 /s/profile/ 中匹配。

Answer 2

您可以在路线中使用 exact:

<Route exact path="/one" component={About}/>

https://reacttraining.com/react-router/web/api/Route/exact-bool

反应路由器 v4 的嵌套路由不起作用

Nested routes with react router v4 not working

reactjs

react-router-v4