Вложенные маршруты с использованием компонентов React

Question

У меня довольно много разных ссылок в моем рабочем приложении. Самым новым, который я создаю, является технический маршрут входа в систему, который позволит им войти и обновить свои профили. Я хочу, чтобы панель навигации оставалась на главной странице при переключении между дочерними маршрутами без необходимости повторного рендеринга, поэтому я посмотрел онлайн, и похоже, что для этого используются вложенные маршруты - go. Проблема в том, что я не могу вложить Route Children в Route Component. Итак, я обнаружил, что для React Router вы можете просто использовать Component в качестве маршрута. Мой главный вопрос: как мне установить путь для маршрута этого компонента, если я не могу использовать Route Component?

Вот что у меня есть в моем индексе. js:

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={App}/>
            <Route path='/service' component={ServiceReport} />

            <Route exact path='/inventory' component={InventorySystem} />
            <Route path='/inventory/tracking' component={PartTracker} />
            <Route path='/inventory/build-assembly' component={BuildAssembly} />
            <Route path='/inventory/import-purchase-order' component={ImportPO} />
            <Route path='/inventory/update-item' component={UpdateItem} />
            <Route path='/inventory/create-item' component={CreateItem} />
            <Route path='/inventory/receive-items' component={ReceiveItem} />

            <TechPortalHome>
                <Route path='page1' component={Page1} />
                <Route path='page2' component={Page2} />
            </TechPortalHome>

        </Switch>
    </BrowserRouter>), document.getElementById('appRoot'));

Если бы я набрал mysite/anythingelse, он отобразит TechPortalHome Component, потому что для него нет действительного пути. Поскольку ни один из путей не совпадает, вместо этого будет отображаться этот компонент. Я хочу иметь возможность от go до mysite/tech-home и вместо этого визуализировать этот компонент, но я не уверен, как это сделать. Любая помощь будет оценена, спасибо!

Answer 1

Пожалуйста, проверьте следующие примеры:

export default function NestingExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function Topics() {
  // The `path` lets us build <Route> paths that are
  // relative to the parent route, while the `url` lets
  // us build relative links.
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  // The <Route> that rendered this component has a
  // path of `/topics/:topicId`. The `:topicId` portion
  // of the URL indicates a placeholder that we can
  // get from `useParams()`.
  let { topicId } = useParams();

  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}

Источник