如何在反应嵌套路由中呈现子组件的第一个选项卡链接组件？

Question

我是一个非常新的反应者，我在这里测试选项卡的布局： https : //codesandbox.io/s/lpjlqo7n4z ，其中我有2个导航，一个Home和About呈现不同的内容。 在首页内，还有2条不同路线的内部导航链接。 现在，我的问题是如何在内部导航下方自动呈现主页内第一个选项卡链接的组件？

假设一切都正确导入，这是我的Index.js代码：

  <Router>
    <div className="App">
      <header>
        <div className="logo">
          <figure>
            <p>Logo</p>
          </figure>
        </div>
        <nav>
         <ul>
           <li>
             <Link to="/" exact>Home</Link>
           </li>
           <li>
             <Link to="/about" exact>About</Link>
           </li>
         </ul>
        </nav>
      </header>
      <main>
        <Switch>
          <Route exact path="/" render={props => <Home {...props}/>} />
          <Route exact path="/about" render={props => <About {...props} />} />
        </Switch>
      </main>
    </div>
  </Router>

家庭组件：

const Home = (props) => {
  return (
    <div className="page">
      <div className="page-header">
        <h1>Homepage</h1>
      </div>
      <div className="page-nav">
        <ul>
          <li>
            <Link to={`/graphics-design`}>Graphics Design</Link>
          </li>
          <li>
            <Link to={`/development`}>Development</Link>
          </li>
        </ul>
      </div>
      <div className="page-content">
        <Switch>
          <Route path={`${match}/:topicId`} render={props => <DesignTab />} />
          <Route
            path={`${match}/:topicId`}
            render={props => <DevelopmentTab />}
          />
        </Switch>
      </div>
    </div>
  );
};

export default Home;

还有第一个选项卡组件：

const DesignTab = props => {
  return (
    <div className="tab-content">
      <div className="tab-header">
        <h1>Design Works</h1>
      </div>
      <div className="tab-details">
        <p>
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
            dignissimos corrupti eius vero maxime architecto similique odio
            maiores nihil accusantium iure error et voluptate placeat excepturi
            blanditiis, ad numquam itaque.
          </span>
        </p>
      </div>
    </div>
  );
};

export default DesignTab;

如何自动在首页内部导航下方呈现标签内容？

请在此处查看布局： https : //codesandbox.io/s/lpjlqo7n4z

Answer 1

在开始问题之前，您需要解决程序中的问题：

由于无法到达路径，因此无法呈现位于主页内部导航下方的选项卡内容。 您基本上是说“一旦在/ home路径中，我想匹配/gaming/:topicId路径”，但这是不可能的，因为到达Home组件的唯一方法是exact匹配/索引。 因此，您无法完全匹配/以及/gaming/topicId 。

我建议将这些路由移动到您的index.js文件：

<Switch>
  <Route path={`${match}/:topicId`} render={props => <DesignTab />} />
  <Route
    path={`${match}/:topicId`}
    render={props => <DevelopmentTab />}
  />
</Switch>

我不明白您希望此Route匹配什么，因为在这种情况下match对象没有意义。

当您发出诸如render={props => <Home />类的语句时，这些道具不会发送到您的Home组件。 您必须告诉组件您要通过render={props => <Home {...props} />来发送道具。

另外const Home = (props, { match })也不是正确的语法，匹配在这里始终是未定义的。 更改为const Home = (props)然后可以通过props.match访问match。

希望我的建议对您有帮助:)