Comment obtenir les paramètres dans le volet de réagir routeur dom v4?

J'ai ce code:

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

le filtre param ou " à la racine est supposé être sur l'Application des composants d'accessoires de base sur le précédent réagir routeur versions?

C'est mon code de 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é ce.accessoires de jeu.match.paramètres de la console, mais il n'en a pas? de l'aide?

Double Possible de ReactRouter: impossible de lire la propriété "imageId" undefined
Je veux l'accepter comme en double, mais je suis en utilisant regexp ici, je pense que c'est à cause de regexp que rien n'est passé sur ma params, j'ai connecté les accessoires.match.params, mais tout ce que j'obtiens est vide d'objet, même si j'ai un travail de réagir routeur, l'accès à l'emplacement du chemin d'accès pathname fait la même chose pour moi, donc je dois faire ce qui est nécessaire dans ma situation, mais j'aimerais avoir des suggestions car je dois partir avec ce depuis que j'ai essayé de résoudre ce pendant des heures

OriginalL'auteur i am gpbaculio | 2017-06-10

  1. 14

    Je suppose que vous êtes à la suite de la Redux tutoriel sur la tête d'oeuf.io, comme votre exemple de code semble utiliser ce qui est défini dans cette série de vidéos. J'ai aussi bloqué sur cette partie tente de s'intégrer Réagir Routeur v4, mais a finalement trouvé une solution qui fonctionne pas loin de ce que vous avez essayé.

    ⚠️ REMARQUE: une chose que je voudrais vérifier ici, c'est que vous êtes à l'aide de la
    version actuelle de react-router-dom (4.1.1 au moment de cette
    de l'écriture). J'ai eu quelques problèmes avec des filtres en option dans les paramètres sur
    certaines des versions alpha et beta de la version 4.

    D'abord, certaines réponses ici sont inexacts, et vous en effet peut usage facultatif params de Réagir Routeur v4 sans la nécessité pour les expressions régulières, de multiples chemins, archaïque, de syntaxe, ou à l'aide de la <Switch> composant.

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

    Seconde, comme d'autres l'ont noté, de Réagir Routeur v4 n'est plus expose params sur la route gestionnaire de composants, mais au lieu de cela nous donne un match prop à utiliser.

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

    À partir d'ici, il y a deux façons de garder votre contenu en synchronisation avec l'itinéraire actuel: à l'aide de mapStateToProps ou à l'aide du HoC withRouter, les deux solutions sont déjà parler de lui dans la tête d'oeuf de la série donc je ne vais pas récapituler ici.

    Si vous rencontrez toujours des difficultés, je vous invite à consulter mon dépôt de la demande dûment remplie à partir de la série.

    Les deux qui semblent bien fonctionner (j'ai juste testé les deux).

    Ceci c'est une excellente solution pour obtenir les paramètres à partir de l'url sans code supplémentaire. Merci!!!!

    OriginalL'auteur indiesquidge

  2. 6

    Réagir Routeur v4 ne pas accepter une regex pour le chemin d'accès. Vous ne trouverez pas des expressions régulières couvertes nulle part dans la documentation. Au lieu d'une expression régulière, vous pouvez simplement créer plusieurs routes à l'intérieur de la <Switch> composant et la première qui correspond sera rendu:

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

    Vous disposez également d'un bug dans votre Application composant. Vous obtenez les params par le match de la propriété, et non pas la propriété params (pas testé, 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>
    );
}

    Tous les ci-dessus est couvert dans le Réagir Routeur V4 docs sur ambiguë matchs

    OriginalL'auteur Todd Chaffee

  3. 1

    De la réagissent-routeur de la documentation, props.match.params est l'endroit où vos paramètres sont stockés.

    Afin d'accéder le nom du filtre, essayez cette

    const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}
    J'ai essayé, mais le filtre n'est pas passé là?
    Supprimer l'expression régulière à partir de votre Route composant. Rendre juste " Route path="/:filtre".
    J'ai essayé, mais il va se planter mon application, j'ai utilisé puisque c'est une option param, mais je ne sais pas pourquoi réagir routeur ne peut pas détecter mon filtre, même si ça fonctionne, je l'ai résolu en utilisant l'emplacement.chemin d'accès depuis il fait le travail pour moi
    Désolé, j'ai mal lu la documentation. Si vous ne path="/:filter?"?. Donc pas de parenthèse, mais de garder le point d'interrogation.
    de la même façon. réagir routeur ne les détecte pas

    OriginalL'auteur glhrmv

  4. 0

    Je ne sais pas pourquoi réagir routeur ne peut pas détecter mon filtre, même si elle fonctionne correctement, j'ai résolu ce problème en utilisant l'emplacement.chemin d'accès depuis il fait le travail pour moi. Je pense que réagir routeur ne peut pas détecter mon filtre param raison de regexp, je m'attendais à cela, alors j'ai mis || pour utiliser tous sur la racine, mais malheureusement pour moi je ne parvient pas à détecter, alors j'ai utilisé de l'emplacement.le chemin d'accès . J'aimerais avoir des conseils car je ne suis pas sûr qu'avec ma configuration de chemin sur les regexp.

    OriginalL'auteur i am gpbaculio