反應路由器v4中的參數無法正常工作

我知道這個問題已被問了好幾次，我已經看了答案，但我並沒有走得太遠。我創建了一些樣板文件（因爲我厭倦了一遍又一遍地編寫相同的基本代碼），但我無法通過RR v4;具體而言，params。反應路由器v4中的參數無法正常工作

這個樣板非常簡單。現在，我正在使用RR4瀏覽帖子，但是，即使我用不同的slu route發送帖子，它總是返回相同的帖子。（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> 
); 
}

來源

2017-10-09 Clayton Ray

您需要包括代碼，而不是隻是一個代碼的鏈接。 https://stackoverflow.com/help/mcve –

我添加了一些代碼，但說實話，我確定有人會在他們回答之前想看到上下文。我無法在這個問題中添加所有這些 –

所以，我真的找到了答案。我在API寫了這個：

const slug: string = req.body.slug

相反的：

const slug: string = req.params.slug

來源

2017-10-12 00:45:19

所以，當你只需要改變帕拉姆：塞在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); 
    }

因此，它要求當參數更改數據！

來源

2017-10-12 00:37:08

反應路由器v4中的參數無法正常工作

回答

相關問題