React Router 6'daki route bileşeninin dışından param alın

Question 1

Adında 2 bileşen oluşturdum Layout ve Homepage. Sonra ekledim Layout buna karşılık, içinde 2 rota uygulayın ve uygulayın Homepage bileşen. Şimdi almaya çalışıyorum params tarafından useParams içinde kanca Layout ben konumdayken bileşen /10. Mümkün mü? Benim tarafımda boşluk bırakıyor.

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 bileşenin kendi oluşturması gerekiyor children yani rotalar gerçekten görselleştirildi. Yine de bunu denedim ve rota parametrelerinde görünmüyordu. Üzgünüm, bu noktada neden olduğu hemen belli değil.

ama

Mizanpajları işlemek için ortak kalıp, mizanpaj bileşenini bir rotaya dönüştürmek ve mizanpajın bir Outlet alt öğelerinin / iç içe geçmiş yollarının işlenebilmesi için.

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

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

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

Rotalar

<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 bileşenin kendi oluşturması gerekiyor children yani rotalar gerçekten görselleştirildi. Yine de bunu denedim ve rota parametrelerinde görünmüyordu. Üzgünüm, bu noktada neden olduğu hemen belli değil.

ama

Mizanpajları işlemek için ortak kalıp, mizanpaj bileşenini bir rotaya dönüştürmek ve mizanpajın bir Outlet alt öğelerinin / iç içe geçmiş yollarının işlenebilmesi için.

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

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

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

Rotalar

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

React Router 6'daki route bileşeninin dışından param alın

Soru

En iyi cevabı

ama

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride