Question

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

假设所有内容均已正确导入，这是我的Index.js代码：

\environments\environment.ts

主页组件：

  <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;

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

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

Answer 1

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

由于无法到达路径，因此无法呈现主页内部导航下方的标签内容。您基本上是说“一旦我进入/主目录路径，我就想匹配/gaming/:topicId路径”，但这是不可能的，因为到达Home组件的唯一方法是到达exact在索引中匹配/。因此，您无法完全匹配/和/gaming/topicId。

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

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

我不明白您希望此路由与之匹配的原因，因为在这种情况下match对象没有意义。

做出类似render={props => <Home />的语句时，道具不会发送到Home组件。您必须告诉组件您想通过render={props => <Home {...props} />发送道具。

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

我希望我的建议会有所帮助：）

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

1 个答案: