प्राप्त params से बाहर के मार्ग में घटक प्रतिक्रिया रूटर 6

0

सवाल

मैं बनाया है 2 घटक का नाम Layout और Homepage. तो मैं जोड़ा गया Layout बदले में और लागू 2 मार्ग के अंदर के साथ Homepage घटक है । अब कोशिश कर रहा हूँ प्राप्त करने के लिए params द्वारा useParams हुक के अंदर Layout घटक है, जबकि मैं में हूँ के स्थान /10. क्या यह संभव है? यह है रिक्त मेरे पक्ष में है.

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>
  );
}
1

सबसे अच्छा जवाब

1

Layout घटक की जरूरत है रेंडर करने के लिए अपने children तो मार्गों वास्तव में कर रहे हैं प्रदान की. मैं यह कोशिश की है, हालांकि यह प्रतीत नहीं किया था लेने के लिए मार्ग पर params. क्षमा करें, यह तुरंत स्पष्ट नहीं है के रूप में क्यों इस बिंदु पर.

लेकिन

आम पैटर्न प्रतिपादन के लिए लेआउट के लिए लेआउट प्रदान घटक में एक मार्ग है और लेआउट में प्रस्तुत करना एक Outlet के लिए अपने बच्चों नेस्टेड/मार्गों के लिए प्रदान किया है ।

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

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

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

मार्गों

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

Edit get-params-from-outside-of-route-component-in-react-router-6

2021-11-23 21:10:32

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में