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

Question

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

假设一切都正确导入，这是我的 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

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

首页内部导航正下方的选项卡内容无法呈现，因为路径无法到达。你基本上说“一旦我在/主路径中，我想匹配/gaming/:topicId路径”但这是不可能的，因为到达你的主组件的唯一方法是exactly匹配/你的索引。所以你不能完全匹配/ 和/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 /> 之类的语句时，不会将 props 发送到您的 Home 组件。您必须改为通过render={props => <Home {...props} /> 告诉组件您要向其发送道具。

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

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