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

反应路由器v4利用动态路由，即，如果位置匹配正确的路由，则新组件可以呈现。

您应在示例或代码框中显示完整的示例。

React Router v4嵌套路由子路由器

1 个答案: