Pobieranie parametrów z zewnątrz składnika trasy w routerze React 6

Question 1

Założyłem 2 składnika z nazwiskami Layout i Homepage. Następnie dodałem Layout w zamian i realizuj wewnątrz niego 2 trasy z Homepage składnik. Teraz staram się uzyskać params Autor: useParams hak wewnątrz Layout składnik, na razie jestem w lokalizacji /10. Czy jest to możliwe? To daje pustkę w mojej stronie.

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 składnik należy uczynić swój children w ten sposób, trasy faktycznie są wyświetlane. Próbowałem to jednak, i wygląda na to, że to nie zadziałało w ustawieniach trasy. Przepraszam, w tej chwili nie jest od razu jasne, dlaczego.

ale

Szablon do wizualizacji układów polega na tym, aby wyświetlić składnik układu w trasę i zrobić tak, aby układ mógł zaproponować Outlet do jego potomnych/zagnieżdżonych tras, na których będą wyświetlane.

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

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

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

Trasy

<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 składnik należy uczynić swój children w ten sposób, trasy faktycznie są wyświetlane. Próbowałem to jednak, i wygląda na to, że to nie zadziałało w ustawieniach trasy. Przepraszam, w tej chwili nie jest od razu jasne, dlaczego.

ale

Szablon do wizualizacji układów polega na tym, aby wyświetlić składnik układu w trasę i zrobić tak, aby układ mógł zaproponować Outlet do jego potomnych/zagnieżdżonych tras, na których będą wyświetlane.

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

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

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

Trasy

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

Pobieranie parametrów z zewnątrz składnika trasy w routerze React 6

Pytanie

Najlepsza odpowiedź

ale

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii