प्रतिक्रिया रूटर वी 6 के साथ काम नहीं यूआरएल मल

Question 1

मैं कोशिश कर रहा हूँ करने के लिए प्रतिक्रिया-रूटर-डोम काम के साथ एक सरल यूआरएल: /उपयोगकर्ता/{नाम}, लेकिन किसी कारण के लिए प्राप्त नहीं कर सकता यह लोड करने के लिए पृष्ठ के यूआरएल स्लग नाम के लिए.

यह की वापसी है मेरे App समारोह घटक:

    <>
      <MainNavBar navigation={navigation} />
      <Routes>
        <Route index={true} element={<Home />} exact />
        <Route path="user" element={<User />} exact>
          <Route
            path=":name"
            render={
              ({ match: { params: { name } } }) => {
                console.log(name);
                console.log("test2");
                return (<UserPage
                  userName={name}
                />);
              }}
          />
        </Route>
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>

इस उपयोगकर्ता के घटक; एक प्लेसहोल्डर के लिए डिबगिंग एटीएम.

const User = () => (
  <div>
    <header className="App-header">
      <Outlet />
    </header>
  </div>
);

जब मैं जाने के लिए http://localhost:3000/user/test यह भार User घटक नहीं है लेकिन बच्चों (आउटलेट/UserPage तत्वों)

मैंने कोशिश की है के बहुत सारे के संयोजन, लेकिन करने के लिए लग रहे हो सकता है कुछ गलत कर रहा है, तो किसी भी मदद की बहुत सराहना की जाएगी. धन्यवाद!

Question 2

में react-router-dom v6 Route घटक नहीं रह गया है render या component रंगमंच की सामग्री, वे प्रस्तुत करना उनके घटकों पर element सहारा. का उपयोग करें useParams हुक का उपयोग करने के लिए मार्ग मैच params. अगर UserPage एक घटक है कि कर सकते हैं नहीं का उपयोग करें प्रतिक्रिया हुक, का उपयोग करें तो एक आवरण समारोह घटक का उपयोग करने के लिए मार्ग मैच param और के रूप में इसे पारित एक सहारा.

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

Drew Reese · Answer 1 · 2021-11-24T01:05:35

में react-router-dom v6 Route घटक नहीं रह गया है render या component रंगमंच की सामग्री, वे प्रस्तुत करना उनके घटकों पर element सहारा. का उपयोग करें useParams हुक का उपयोग करने के लिए मार्ग मैच params. अगर UserPage एक घटक है कि कर सकते हैं नहीं का उपयोग करें प्रतिक्रिया हुक, का उपयोग करें तो एक आवरण समारोह घटक का उपयोग करने के लिए मार्ग मैच param और के रूप में इसे पारित एक सहारा.

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

प्रतिक्रिया रूटर वी 6 के साथ काम नहीं यूआरएल मल

सवाल

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

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

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

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

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