Le premier problème est ici :
render={(match) => ( ...
La fonction render reçoit un objet props qui contient une propriété match. Au lieu de déstructurer la propriété match, ce que vous faites en réalité, c'est assigner l'ensemble de l'objet props à une variable match. Donc lorsque vous accédez à match.params, cela ne sera pas trouvé.
Vous devez mettre des accolades autour de match pour le déstructurer.
render={({match}) => ( ...
Le deuxième problème est l'imbrication des deux composants Route. J'obtiens un avertissement :
Avertissement : Vous ne devez pas utiliser et dans la même route; sera ignoré
Ainsi, en fonction de cet avertissement, vous pouvez voir que votre Redirect est entièrement ignoré puisqu'il provient de render. Le Route enfant est vu comme la fonction de rendu pour les classes Route.
Je suppose que vous avez diverses sous-pages d'un cours? Et nous voulons forcer l'URL à inclure "/home" si rien n'est défini? (Personnellement, je ferais l'inverse et redirigerais "/home" vers l'URL racine du cours).
Auparavant, j'ai simplement essayé de mettre une balise Redirect avec "from" et "to" mais j'ai rencontré le problème de l'URL allant en fait vers "/classes/:course/home" au lieu de "/classes/BIO1001/home"
Conformément à la documentation, vous pouvez utiliser des paramètres dans votre Redirect, mais seulement s'il est à l'intérieur d'un Switch.
Voici un exemple de code pour le faire :
const CoursePage = () => {
// vous pouvez accéder aux arguments depuis les props ou par l'intermédiaire des hooks
const { course, tab } = useParams();
// je ne suis pas sûr de la façon dont vous voulez gérer les différents onglets
return Visualisation du cours {course};
};
const App = () => (
);
export default App;
