react路由器v4不起作用的嵌套路由

Question

我已经为我已经使用4个组件页面的page.In侧创建了一个路由。我已经给出了到这些component.In报头下拉列表的路径。我已经给出了到这些组件的链接，在第一次单击时，路径是改变的。

​

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