Obține params din afara traseului componentă în Reacționa Router 6

Question 1

Am creat 2 componente nume Layout și Homepage. Apoi am adaugat Layout în schimb și să pună în aplicare 2 traseu interior cu Homepage componenta. Acum sunt încercarea de a obține params de useParams cârlig interior Layout componenta în timp ce eu sunt la locul de /10. Este posibil? Se da gol din partea mea.

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 componenta trebuie să ofere children astfel, rutele sunt efectiv prestate. Am încercat acest lucru, deși și nu părea să se ridice de pe traseu params. Îmi pare rău, nu este imediat clar de ce în acest moment.

DAR

Comune model pentru prestarea machete este de a face layout componentă într-un traseu și au aspectul face o Outlet pentru copii/imbricate rute să fie prestate pe.

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

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

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

Rute

<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 componenta trebuie să ofere children astfel, rutele sunt efectiv prestate. Am încercat acest lucru, deși și nu părea să se ridice de pe traseu params. Îmi pare rău, nu este imediat clar de ce în acest moment.

DAR

Comune model pentru prestarea machete este de a face layout componentă într-un traseu și au aspectul face o Outlet pentru copii/imbricate rute să fie prestate pe.

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

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

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

Rute

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

Obține params din afara traseului componentă în Reacționa Router 6

Problema

Cel mai bun răspuns

DAR

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie