Ottenere params da fuori rotta componente Reagire Router 6

Question 1

Ho creato 2 componenti denominato Layout e Homepage. Poi ho aggiunto Layout nel ritorno e implementare 2 percorso al suo interno con Homepage componente. Ora sto cercando di ottenere params da useParams gancio interno Layout componente mentre io sono nella posizione di /10. È possibile? Sta dando vuoto nel mio fianco.

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 componente è necessario per rendere il suo children così i percorsi sono effettivamente resi. Ho provato in questo modo e anche se non sembra raccogliere in un percorso params. Mi dispiace, non è immediatamente chiaro perché a questo punto.

MA

Il modello comune per il rendering del layout è quello di rendere il layout del componente in un percorso e fare il layout di rendere un Outlet per i suoi bambini/nidificati percorsi per essere renderizzati su.

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

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

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

Percorsi

<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 componente è necessario per rendere il suo children così i percorsi sono effettivamente resi. Ho provato in questo modo e anche se non sembra raccogliere in un percorso params. Mi dispiace, non è immediatamente chiaro perché a questo punto.

MA

Il modello comune per il rendering del layout è quello di rendere il layout del componente in un percorso e fare il layout di rendere un Outlet per i suoi bambini/nidificati percorsi per essere renderizzati su.

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

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

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

Percorsi

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

Ottenere params da fuori rotta componente Reagire Router 6

Domanda

Migliore risposta

MA

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria