React Router v4のパラメータが正しく機能していない

Question

この質問はかなりの回数聞かれていますが、回答を見てきましたが、私は遠くに行っていません。私はいくつかの定型文を作成しています（私は同じ基本コードを何度も繰り返し書くことに飽き飽きしています）。しかし、RR v4を過去にすることはできません。具体的には、paramsである。

この定型文はかなりシンプルです。今、私はRR4の記事に移動していますが、別のスラッグで投稿しても、常に同じ投稿を返します。 （first-post）。適切にナビゲートする方法に関するアドバイスはありますか？私は文書があまりにも大きくないと思う。paramsが関係している。ここではレポです：

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

UPDATE：

ここにいくつかのコードがあります：

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

だから、あなただけのparamを変更する場合：として渡されていただきました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); 
    } 

パラメータが変更されたとき、それがデータを要求しているので！