Získajte params mimo trasy komponent v Reagovať Router 6

Question 1

Vytvoril som 2 komponenty s názvom Layout a Homepage. Potom som pridal Layout v vráti a realizovať 2 trasy vo vnútri s Homepage komponent. Teraz som snaží dostať params tým, že useParams háku vo vnútri Layout komponent, kým som v mieste /10. Je to možné? To dáva prázdne v mojej strany.

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 komponent musí spôsobiť jeho children takže cesty sú skutočne stala. Skúšal som to a keď to sa nezdá byť vyzdvihnúť na trase params. Ospravedlňujem sa, to nie je hneď jasné, prečo sa v tomto bode.

ALE

Spoločný vzor pre vykresľovanie rozložení je poskytnúť rozloženie komponentov do trasy a majú rozloženie vykreslenie Outlet pre jej deti/vnorené trasy, aby sa stala, sa na.

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 komponent musí spôsobiť jeho children takže cesty sú skutočne stala. Skúšal som to a keď to sa nezdá byť vyzdvihnúť na trase params. Ospravedlňujem sa, to nie je hneď jasné, prečo sa v tomto bode.

ALE

Spoločný vzor pre vykresľovanie rozložení je poskytnúť rozloženie komponentov do trasy a majú rozloženie vykreslenie Outlet pre jej deti/vnorené trasy, aby sa stala, sa na.

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>

Získajte params mimo trasy komponent v Reagovať Router 6

Otázka

Najlepšiu odpoveď

ALE

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii