Как отобразить компонент первой вкладки дочернего компонента в реакциях, вложенных в маршруты?

Question

Я очень новичок, чтобы реагировать, и я тестирую раскладку вкладок здесь: https://codesandbox.io/s/lpjlqo7n4z, где у меня есть 2 навигации, Home и О , которыеоказывает различное содержание.Внутри домашней страницы есть еще 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

Существуют проблемы с вашей программой, которые необходимо устранить перед началом проблемы:

Невозможно отобразить содержимое вкладки чуть ниже внутренней навигации домашней страницы, так как путь к ней невозможен.Вы в основном говорите: «Как только я нахожусь в / домашнем пути, я хочу сопоставить /gaming/:topicId пути», но это невозможно, потому что единственный способ добраться до вашего домашнего компонента - это 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 />, реквизиты не отправляются на ваш домашний компонент.Вы должны указать компоненту, что вы хотите отправить его реквизиты через render={props => <Home {...props} />.

Также const Home = (props, { match }) не является правильным синтаксисом, и совпадение здесь всегда будет неопределенным.Измените на const Home = (props), тогда вы сможете получить доступ к матчу через props.match.

Надеюсь, мой совет поможет:)