Params in React Router v4 funktioniert nicht richtig

Question

Ich weiß, diese Frage wurde schon einige Male gestellt und ich habe mir die Antworten angesehen, aber ich bin nicht sehr weit gegangen. Ich erstelle ein paar Textbausteine ​​(weil ich es satt habe, immer wieder denselben Basiscode zu schreiben), aber ich komme nicht an RR v4 vorbei; speziell, params.

Dieser Textbaustein ist ziemlich einfach. Im Moment navigiere ich zu Posts mit RR4, aber selbst wenn ich zu einem Post mit einem anderen Slug route, gibt es immer den gleichen Post zurück. (first-post). Irgendwelche Tipps, wie man richtig navigiert? Ich denke, die Dokumente sind nicht zu groß, wo params betroffen sind. Hier ist der Repo:

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

UPDATE:

Hier einige 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

So fand ich tatsächlich die Antwort. Ich schrieb dies in meinem API:

const slug: string = req.body.slug

Statt:

const slug: string = req.params.slug

Answer 2

Also, wenn Sie nur die param ändern: Slug in der URL, nur geändert, was ist bestandene als Eine Prop (props.match.params.slug) in die Container-Komponente, die Sie haben, aber das zerstört nicht die vorhandene gerenderte Komponente und rekonstruiert sie (seit der gleichen). Dies bedeutet, dass der Konstruktor nicht erneut aufgerufen wird, wenn Sie Ihre HTTP-Anforderung für die Daten eingeben.

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); 
    } 

also, dass sie die Daten anfordert, wenn die Parameter ändern:

Um dies zu beheben, habe ich auf die folgende ähnlich gemacht!