Obtenir les params de l'extérieur de la route de la composante de Réagir Routeur 6

Question 1

J'ai créé 2 composants nommés Layout et Homepage. Puis j'ai ajouté Layout en retour, et de mettre en œuvre 2 route à l'intérieur avec Homepage composante. Maintenant, essaie de le faire params par useParams crochet à l'intérieur de Layout composant alors que je suis dans l'emplacement de /10. Est-il possible? C'est en donnant vide dans mon côté.

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

Question 2

Layout composant doit rendre son children si les routes sont effectivement rendus. J'ai essayé cela et il ne semble pas de ramasser sur la route params. Désolé, il n'est pas immédiatement clair pourquoi à ce point.

MAIS

Le modèle commun pour le rendu des mises en page est de rendre la mise en page de composant dans un itinéraire et avoir la mise en page de rendre un Outlet pour ses enfants/imbriqués les routes pour le rendu sur.

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

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

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

Itinéraires

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

Drew Reese · Answer 1 · 2021-11-23T21:10:32

Layout composant doit rendre son children si les routes sont effectivement rendus. J'ai essayé cela et il ne semble pas de ramasser sur la route params. Désolé, il n'est pas immédiatement clair pourquoi à ce point.

MAIS

Le modèle commun pour le rendu des mises en page est de rendre la mise en page de composant dans un itinéraire et avoir la mise en page de rendre un Outlet pour ses enfants/imbriqués les routes pour le rendu sur.

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

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

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

Itinéraires

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

Obtenir les params de l'extérieur de la route de la composante de Réagir Routeur 6

La question

La meilleure réponse

MAIS

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie