Réagir Routeur v6 ne fonctionne pas avec l'URL de Limaces

Question 1

Je suis en train de faire réagir-routeur-dom travailler avec un simple url: /utilisateurs/{nom} mais pour une raison quelconque ne peuvent pas l'obtenir pour charger la page avec l'url slug pour le nom.

C'est le retour de mon Application de l'élément de fonction:

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

C'est le composant Utilisateur; un espace réservé pour mon débogage de l'atm.

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

Quand je vais à http://localhost:3000/user/test il charge le User composant, mais pas les enfants (de la Prise de courant/UserPage éléments)

J'ai essayé des tas de combinaisons, mais semblent être en train de faire quelque chose de mal, de sorte que toute aide serait très appréciée. Merci!

Question 2

Dans react-router-dom le v6 Route les composants n'ont plus render ou component les accessoires, ils rendent leurs composants sur le element prop. L'utilisation de la useParams crochet pour accéder à la route de match params. Si UserPage est un composant qui ne peut pas utiliser Réagir crochets, puis utiliser un wrapper de l'élément de fonction pour accéder à la route de match param et de le passer comme un accessoire.

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

Dans react-router-dom le v6 Route les composants n'ont plus render ou component les accessoires, ils rendent leurs composants sur le element prop. L'utilisation de la useParams crochet pour accéder à la route de match params. Si UserPage est un composant qui ne peut pas utiliser Réagir crochets, puis utiliser un wrapper de l'élément de fonction pour accéder à la route de match param et de le passer comme un accessoire.

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

Réagir Routeur v6 ne fonctionne pas avec l'URL de Limaces

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie