Param in React Router v4가 올바르게 작동하지 않습니다.

Question

이 질문에 대한 답변을 많이 보았지만 답변을 살펴 보았지만 아직 멀지 않았습니다. 몇 가지 상용구를 만들었지 만 (왜냐하면 동일한 기본 코드를 반복 작성하는 것에 지쳤으므로) RR v4를 지나칠 수는 없습니다. 구체적으로는 params입니다.

이 상용구는 매우 간단합니다. 지금은 RR4를 사용하여 게시물로 이동하고 있지만 다른 슬러그로 게시물로 이동하더라도 항상 같은 게시물을 반환합니다. (first-post). 제대로 탐색하는 방법에 대한 조언이 있으십니까? 나는 params가 걱정되는 곳에 문서가 너무 크지 않다고 생각한다.

이

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

UPDATE : 그냥 PARAM을 변경 그래서

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

그래서 실제로 대답을 발견했습니다. 내 API에 쓴 :

const slug: string = req.body.slug

대신에 :

const slug: string = req.params.slug

Answer 2

: 여기

가 일부 코드의 여기 REPO의 URL에 슬러그, 당신은 변경 뭐죠로 전달되어 소유 한 컨테이너 구성 요소에 소품 (props.match.params.slug)을 넣지 만 렌더링 된 기존 구성 요소를 파괴하지 않고 동일한 구성 요소를 재구성하지 않습니다. 이는 데이터에 대한 http 요청을 한 경우 생성자가 다시 호출되지 않음을 의미합니다. 이 문제를 해결하려면

, 나는 다음과 같은 짓을했는지 :

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

을 그래서 매개 변수가 변경 데이터를 요청하는!