React Router v4 Вложенные маршруты Sub Routers

Question

У меня есть вложенные маршруты:

<TutorialsNavBarItems>
  {items.map(item => {
              const newItem = Lowercase(item);
              return (
                <Link to={`${url}/${newItem}`} key={item}>
                  <TutorialsNavBarItem
                    onClick={() => setActive(newItem)}
                    isActive={active === newItem}
                  >
                    {item}
                  </TutorialsNavBarItem>
                </Link>
              );
            })}
          </TutorialsNavBarItems>
          <Route
            path={`${url}/:tutorial`}
            render={({ match }) => <div>{match.params.tutorial}</div>}
          /> 

Когда пользователь нажимает любую из этих кнопок, я отображаю содержимое под этими кнопками.

Это работает, но у меня есть раскрывающееся меню на главной странице.

Когда пользователь щелкнул любой из этих элементов, мне было показано то же содержимое, что и раньше.

Как я могу это сделать?

Моя структура маршрутизаторов:

export default () => (
  <Router>
    <ScrollToTop>
      <HeaderPixomatic />
      <Switch>
        <Route exact path="/" component={MainPage} />
        <Route exact path="/desktop-features" component={DesktopFeatures} />
        <Route path="/desktop-features/:featureName" component={DesktopFeature} />
        <Route path="/tutorials" component={Tutorials} />
        <Route path="/pricing" component={Pricing} />
        <Route path="/contact-us" component={ContactUs} />
        <Route path="/privacy-policy-and-terms-of-use" component={OurRights} />
        <Route component={Lost} />
      </Switch>
      <FooterPixomatic />
    </ScrollToTop>
  </Router>
);

Answer 1

React router v4 использует динамическую маршрутизацию, т. Е. Ваш новый компонент может отображаться, если местоположение соответствует правильному маршруту.

Вы должны показать свой полный пример или в codeandbox.