web-dev-qa-db-fra.com

Comment obtenir params en composant dans le routeur de réaction dom v4?

J'ai ce code:

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

le filtre param ou '' sur la racine est supposé être sur la base des accessoires de composants d'application sur les versions précédentes de routeur

Ceci est mon code sur mon application:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

Je me suis connecté this.props.match.params sur console mais il n’en a pas? Aidez-moi?

javascriptreactjsreact-routerreact-router-v4react-router-dom
5
i am gpbaculio

Je suppose que vous suivez le didacticiel Redux sur Egghead.io , car votre exemple de code semble utiliser ce qui est défini dans cette série de vidéos. Je me suis également retrouvé coincé dans cette partie en essayant d’intégrer React Router v4, mais j’ai finalement trouvé une solution efficace non loin de ce que vous avez essayé.

⚠️ REMARQUE: une chose que je voudrais vérifier ici est que vous utilisez le fichier version actuelle de react-router-dom (4.1.1 au moment de l'écriture ). J'ai eu quelques problèmes avec les filtres optionnels dans les paramètres sur certaines des versions alpha et bêta de la v4.

Tout d’abord, certaines des réponses fournies ici sont incorrectes, et vous pouvez utiliser des paramètres facultatifs dans React Router v4 sans recourir à des expressions régulières, à des chemins multiples, à une syntaxe archaïque ni à l’utilisation du composant <Switch>.

<BrowserRouter>
  <Route  path="/:filter?" component={App} />
</BrowserRouter>

Deuxièmement, comme d'autres l'ont noté, React Router v4 n'expose plus params sur les composants du gestionnaire de routage, mais nous donne plutôt un accessoire match à utiliser.

const App = ({ match }) => {
    return (
      <div>
        <AddTodo />
        <VisibleTodoList filter={match.params.filter || 'all'} />
        <Footer />
      </div>
    )
}

À partir de là, il existe deux façons de synchroniser votre contenu avec l'itinéraire actuel: en utilisant mapStateToProps ou en utilisant HoC withRouter, les deux solutions étant déjà évoquées dans la série Egghead, je ne les récapitulerai donc pas ici.

Si vous rencontrez toujours des problèmes, je vous exhorte à consulter mon référentiel de la candidature complétée de cette série.

Les deux semblent bien fonctionner (je viens de les tester tous les deux).

13
indiesquidge

React Router v4 n'accepte pas d'expression régulière pour le chemin. Vous ne trouverez pas d'expressions régulières couvertes nulle part dans la documentation. Au lieu d'un regex, vous pouvez simplement créer plusieurs itinéraires dans le composant <Switch> et le premier qui correspond sera rendu:

<BrowserRouter>
  <Switch>
    <Route  path="/" component={App} />
    <Route  path="/:filter" component={App} />
  </Switch>
</BrowserRouter>

Vous avez également un bogue dans votre composant App. Vous obtenez les paramètres via la propriété match, pas la propriété params (non testée, mais cela devrait être plus proche de ce que vous voulez):

const App = ({match}) => {
    return ( 
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={match.params.filter || 'all'} 
        />
        <Footer />
      </div>
    );
}

Tout ce qui précède est traité dans la documentation React Router V4 sur les correspondances ambiguë

6
Todd Chaffee

Dans la documentation react-router , props.match.params est l'endroit où vos paramètres sont stockés.

Donc, pour accéder au nom du filtre, essayez ceci

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}
1
glhrmv

Je ne sais pas pourquoi le routeur de réaction ne peut pas détecter mon filtre alors qu'il fonctionne correctement. J'ai résolu ce problème en utilisant location.pathname car il fait le travail à ma place. Je pense que le routeur de réaction ne peut pas détecter mon paramètre de filtre à cause d'expressions rationnelles, je m'attendais à ce que je mette || pour utiliser tout sur la racine, mais malheureusement pour moi je ne peux pas détecter alors j'ai utilisé location.pathname. J'apprécierais des suggestions sur ceci puisque je ne suis pas sûr avec ma configuration de chemin sur regexp.

0
i am gpbaculio