Reacționează Router v6 nu lucrează cu Melci URL

Question 1

Încerc să reacționeze-router-dom lucra cu un simplu url-ul: /utilizator/{nume} dar pentru unii motiv, nu se poate face pentru a încărca pagina cu melc url-ul pentru nume.

Acest lucru este meu App funcția de componentă:

    <>
      <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>
    </>

Aceasta este componenta User; un substituent pentru depanare atm.

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

Când mă duc la http://localhost:3000/user/test se încarcă User componenta dar nu la copii (Priza/UserPage elemente)

Am încercat o mulțime de combinații, dar par a face ceva greșit, așa că orice ajutor ar fi foarte apreciat. Multumesc!!!

Question 2

În react-router-dom v6 de Route componentele nu mai au render sau component elemente de recuzită, le face lor pe componente element prop. Utilizați useParams cârlig pentru a accesa traseul meci params. Dacă UserPage este o componentă care nu poate folosi Reacționa cârlige, apoi utilizați un înveliș funcția de componentă a accesa traseul meci param și trece-l ca un propunerii.

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

În react-router-dom v6 de Route componentele nu mai au render sau component elemente de recuzită, le face lor pe componente element prop. Utilizați useParams cârlig pentru a accesa traseul meci params. Dacă UserPage este o componentă care nu poate folosi Reacționa cârlige, apoi utilizați un înveliș funcția de componentă a accesa traseul meci param și trece-l ca un propunerii.

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>
</>

Reacționează Router v6 nu lucrează cu Melci URL

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie