Params dans React Router v4 ne fonctionne pas correctement

Question

Je sais que cette question a été posée à plusieurs reprises et j'ai regardé les réponses, mais je ne suis pas allé très loin. Je crée quelques passe-partout (parce que je suis fatigué d'écrire le même code de base encore et encore) mais je ne peux pas passer RR v4; spécifiquement, params.

Cette plaque passe-partout est assez simple. En ce moment, je navigue vers des messages avec RR4, cependant, même si je route vers un poste avec un slug différent, il renvoie toujours le même poste. (first-post). Des conseils sur la façon de naviguer correctement? Je pense que les docs ne sont pas très bien là où params sont concernés. Voici le repo:

https://github.com/boilerstrapper/react-boilerstrap

MISE À JOUR:

est ici un code:

components/App/index.js 
// ...imports 


export const App =() => { 
    return (
    <div> 
     <Nav /> 

     <Switch> 
     <Route exact path='/' component={Login} /> 
     <Route exact path='/posts' component={PostList} /> 
     <Route exact path='/posts/:slug' component={PostListItem} /> 
     <Route exact path='/products' component={ProductList} /> 
     <Route exact path='/products/:slug' component={ProductListItem} /> 
     <Route exact path='/login' component={Login} /> 
     <Route component={NotFound} /> 
     </Switch> 

    </div> 
); 
} 

Answer 1

Donc, j'ai trouvé la réponse. Je l'ai écrit dans mon API:

const slug: string = req.body.slug

Au lieu de:

const slug: string = req.params.slug

Answer 2

Alors, quand vous changez juste le param: limaces dans l'url, vous ne avez modifié ce qui est été passé en un prop (props.match.params.slug) dans le composant conteneur que vous avez, mais cela ne détruit pas le composant existant rendu et le reconstruit (puisque c'est le même). Cela signifie que le constructeur n'est pas appelé à nouveau lorsque vous faites votre requête http pour les données.

Pour résoudre ce problème, je l'ai fait semblable à ce qui suit:

componentWillMount() { 
    this.loadEvents(); 
    } 
    componentWillReceiveProps(nprops) { 
    this.loadEvents(nprops.match.params.orgId); 
    } 
    loadEvents(orgId = this.props.match.params.orgId) { 
    axios.get(`/_api/org/events?org=${orgId}`) 
     .then(res => { 
     this.setState({ events: res.data }); 
     }) 
     .catch(alert); 
    } 

Alors qu'il demande les données lorsque les paramètres changent!