0
votes

Rediriger dans une fonction (React)

J'essaie de comprendre pourquoi cela renvoie une erreur Attendu un appel d'affectation ou de fonction et j'ai plutôt vu une expression @ typescript-eslint / no-unused-expressions pour autant que je sache, la valeur passée dans LessonId est correcte.

Plus en amont, je peux simplement mais j'essaye actuellement de rediriger sur double-clic d'où la fonction.

const lessonTableRowLink =  (LessonId:number|undefined) => {

        let link = '/edit/Lesson/'+LessonId;

        <Redirect to= {link} />
    }

<tr className="lessonTableRow" key={lesson.lessonId} onDoubleClick={() =>{ lessonTableRowLink(lesson.lessonId)}}>

reactjs html

0 commentaires

3 Réponses :

0
votes

JSX ne fait rien de lui-même, et ESLint vous en avertit. Au lieu de cela, vous devez utiliser l ' historique API

history.replace(link)

de React Router

2 commentaires

Pourriez-vous nous en dire un peu plus? J'ai fait un peu de recherche sur Google et d'après ce que j'ai compris, history.push va-t-il insérer le lien de redirection souhaité dans la pile d'historique du navigateur?

En fait, vous voudriez utiliser history.replace . Cela fonctionne presque exactement de la même manière que Redirect , qui appelle en fait history.replace par défaut. Voici le code si vous êtes curieux: github.com/ReactTraining/react-router/blob/...

1
votes

Vous avez manqué l'instruction de retour; Vous devez le renvoyer pour que react puisse rendre la page.

const lessonTableRowLink =  (LessonId:number|undefined) => {

        let link = '/edit/Lesson/'+LessonId;
        return <Redirect to= {link} /> // add return
    }

Vous devez également vérifier NavLink ou history # push

2 commentaires

Merci d'avoir montré la raison pour laquelle le code ci-dessus ne fonctionnait pas, je dirais que c'est le plus proche de mon code d'origine et que la tâche prévue est accomplie.

@ChristianCuneo envisage de l'accepter si cela fonctionne bien

0
votes

Je recommande d'utiliser le hook useHistory de react-router-dom pour cela.

Votre code pourrait ressembler à ceci: p >

import React, { FC } from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent: FC = () => {
  const history = useHistory();

  const lessonTableRowLink = (LessonId:number|undefined) => {
    let link = '/edit/Lesson/'+LessonId;
    history.push(link);
  }

  return (
    ...
      <tr className="lessonTableRow" key={lesson.lessonId} onDoubleClick={() =>{ lessonTableRowLink(lesson.lessonId)}}>
    ...
  );
};

2 commentaires

C'est la solution la plus proche de la solution que j'ai fini par utiliser, mais je tiens à remercier tous d'avoir mis leurs deux cents.

Pas de problème, pourriez-vous donner un +1 et marquer comme réponse s'il vous plaît :)