Вложенные маршруты с реагирующим маршрутизатором v4 не работают

Question

Я создал маршрут для страницы. На этой странице я использую 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>

Answer 1

Вы можете использовать точное в маршруте:

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

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

Answer 2

Добавление exact к маршрутам решит проблему:

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

Компонент Switch отображает первый соответствующий маршрут, а /s сопоставляется в /s/profile/.