Получение параметров извне компонента маршрута в маршрутизаторе React 6

Question 1

Я создал 2 компонента с именами Layout и Homepage. Затем я добавил Layout взамен и реализуйте внутри него 2 маршрута с Homepage компонент. Сейчас я пытаюсь получить params Автор: useParams крючок внутри Layout компонент, пока я нахожусь в расположении /10. Возможно ли это? Это дает пустоту в моей стороне.

App.js

const App = () => {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Routes>
    </Layout>
  );
}

Layout.js

import { useParams } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params);
  return(
    <div>
      Hello World
    </div>
  );
}

Question 2

Layout компоненту необходимо отрисовать свой children таким образом, маршруты фактически отображаются. Я попробовал это, однако, и, похоже, это не сработало в параметрах маршрута. Извините, на данный момент не сразу понятно, почему.

но

Общий шаблон для визуализации макетов состоит в том, чтобы отобразить компонент макета в маршрут и сделать так, чтобы макет отображал Outlet для его дочерних/вложенных маршрутов, на которых будут отображаться.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Маршруты

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Drew Reese · Answer 1 · 2021-11-23T21:10:32

Layout компоненту необходимо отрисовать свой children таким образом, маршруты фактически отображаются. Я попробовал это, однако, и, похоже, это не сработало в параметрах маршрута. Извините, на данный момент не сразу понятно, почему.

но

Общий шаблон для визуализации макетов состоит в том, чтобы отобразить компонент макета в маршрут и сделать так, чтобы макет отображал Outlet для его дочерних/вложенных маршрутов, на которых будут отображаться.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Маршруты

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Получение параметров извне компонента маршрута в маршрутизаторе React 6

Вопрос

Лучший ответ

но

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории