Router de réaction routage avec paramètre id

Question

J'ai un problème avec le passage de paramètres à l'intérieur de la route. Actuellement, j'ai ces routes :

La route de la page de la section ressemblera donc à ceci : cours/k-8-grades/early-math

Ce que je veux faire:

• Lorsque la page de la section est atteinte, ajoutez un nouveau paramètre id. Cet id est l'identifiant de la leçon vidéo. Il devrait donc avoir cette forme : cours/k-8-grades/early-math/videoId
• Lorsque vous cliquez sur le bouton "Aperçu", ajoutez l'url #overview. Donc cela devrait être cours/k-8-grades/early-math/videoId#overview.
• Lorsque vous cliquez sur le bouton "Recherche", retirez le #overview de l'url et ajoutez #search. Ainsi, cela devrait être cours/k-8-grades/early-math/videoId#search

Ce que j'ai essayé :

• Utilisation de redirections. Lorsque la page de la section est atteinte, passer d'une manière ou d'une autre l'id à la redirection. Mais cela a échoué car les routes ne correspondaient pas correctement.

  {/ cours/early-math/early-math/test /}

  {/ cours/k-8-grades/early-math /}

• Dans la page de la section, ajoutez l'identifiant de la leçon lors de l'initialisation. Mais si je l'ajoute manuellement

  import { useHistory } from "react-router-dom"; const history = useHistory(); history.push('fdfdf');

Cela deviendrait cours/k-8-grades/fdfdf au lieu de cours/k-8-grades/early-math/fdfdf

Mise à jour Donc ce que j'ai essayé de faire est de créer une page de redirection de section :

La page de redirection de section ajoute l'identifiant de la vidéo. Car j'ai besoin du chemin d'accès avant de récupérer le bon identifiant vidéo cours/k-8-grades/early-math.

props.history.push(`${location.pathname}/${videoId}`);

Dans la page de la section, j'ai utilisé la suggestion et cela a parfaitement fonctionné.

props.history.push({ hash: "overview" })

Malheureusement, cela n'a pas résolu entièrement mon problème : Comportement attendu : Actuellement, lorsque je visite la page de la section, mon URL est la suivante :

cours/k-8-grades/early-math/videoId1#overview

En cliquant sur le lien de la deuxième vidéo, l'URL devrait changer en :

cours/k-8-grades/early-math/videoId2#overview

Un exemple concret serait le lecteur vidéo Udemy.

Solution trouvée en utilisant : Dans la page de la section

history.push({
      pathname: '/cours/k-8-grades/early-math/videoId'
    })

Answer 1

Je pense que le principal problème est que vous faites référence aux deux parties variables de votre chemin avec :id.

Vous essayez de mapper courses/k-8-grades/early-math/ sur courses/:id/:id/.

Je pense plutôt que vous devriez le mapper sur quelque chose de la forme : courses/:a/:b/.

Pour ajouter #overview ou #search au chemin, vous pourriez faire ceci :

history.push({ hash: "overview" })

Exemple d'implémentation :

function App() {
  return (

  );
}

function SectionPage() {
  const history = useHistory();

  return (

       history.push({ hash: "overview" })}>
        overview

       history.push({ hash: "search" })}>search

  );
}

Exemple sur codesandbox.

Answer 2

Le défi est que vous essayez de créer des routes imbriquées à deux niveaux à partir du même parent.

Pour résoudre le problème, allez sur votre et créez une nouvelle en utilisant le crochet useRouteMatch dans ce lien. Avec cela, vous avez maintenant accès à tout comme vous aviez dans CategoriesPage

//remove the SectionPage page route

Allez sur le composant pour accéder au composant

const CoursesPage = () =>{
let {path} = useRouteMatch()

return(

        {/* Vos liens souhaités */}

                Nous sommes ici sur CoursesPage

)}

Maintenant vous pouvez utiliser vos routes imbriquées individuelles ci-dessus comme:

const VideoId = () =>{
let { videoId } = useParams(); //make the destructured property name same with paths declared above
return (

        {videoId}

)}