Reagire Router v6 non funziona con URL Lumache

Question 1

Sto cercando di fare reagire-router-dom lavorare con un semplice url: /user/{name} ma per qualche motivo non è possibile ottenere che sia caricata la pagina con l'url slug per il nome.

Questo è il ritorno di mia App in funzione del componente:

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

Questo è il componente Utente; un segnaposto per il mio debug bancomat.

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

Quando vado a http://localhost:3000/user/test carica il User componente, ma i bambini non (Outlet/UserPage elementi)

Ho provato un sacco di combinazioni, ma sembrano essere facendo qualcosa di sbagliato, in modo che qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Question 2

In react-router-dom il v6 Route i componenti non hanno più render o component oggetti di scena, che rendono i loro componenti element prop. Utilizzare il useParams gancio per accedere al percorso partita params. Se UserPage è un componente che non può utilizzare Reagire ganci, quindi utilizzare una funzione wrapper componente di accesso al percorso partita param e passa come prop.

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

In react-router-dom il v6 Route i componenti non hanno più render o component oggetti di scena, che rendono i loro componenti element prop. Utilizzare il useParams gancio per accedere al percorso partita params. Se UserPage è un componente che non può utilizzare Reagire ganci, quindi utilizzare una funzione wrapper componente di accesso al percorso partita param e passa come prop.

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

Reagire Router v6 non funziona con URL Lumache

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria