如何獲得組件中的參數在響應路由器DOM V4中？

我有這樣的代碼：如何獲得組件中的參數在響應路由器DOM V4中？

<BrowserRouter> 
    <Route path="/(:filter)?" component={App} /> 
</BrowserRouter>

濾波器PARAM或「」上的根被假設是在App組件的道具上一鹼反應路由器版本？

這是在我的應用我的代碼：

const App = ({params}) => { 
    return (// destructure params on props 
     <div> 
     <AddTodo /> 
     <VisibleTodoList 
      filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
     /> 
     <Footer /> 
     </div> 
    ); 
}

我登錄控制檯this.props.match.params但它有沒有？幫幫我？

來源

2017-06-10 i am gpbaculio

[ReactRouter：無法讀取未定義的屬性「imageId」的可能重複（https://stackoverflow.com/questions/44294006/reactrouter-can-not-read-property-imageid-of-undefined） –

I想接受這是重複的，但我在這裏使用正則表達式，我認爲這是因爲正則表達式，沒有任何傳遞給我的參數，我已經記錄props.match.params，但我得到的是空對象，即使我有一個工作反應路由器，訪問位置路徑名對我來說也是一樣的，所以我必須在我的情況下做必要的事情，但我會很感激建議，因爲我必須繼續前進，因爲我試圖解決這個問題幾個小時 –

覆蓋我承擔您正在關注Redux tutorial on Egghead.io，因爲您的示例代碼似乎使用該視頻系列中定義的內容。我也試圖將這部分內容整合到React Router v4中，但最終發現了一個距離您嘗試的距離不遠的工作解決方案。

⚠️注意：有一件事我會檢查這裏是您正在使用的react-router-dom的當前版本（4.1.1這寫作的時候）。我在某些v4的alpha和beta版本的params上有可選的過濾器問題。

首先，這裏的一些答案都是不正確的，你確實可以使用可選PARAMS陣營路由器V4，而不需要對正則表達式，多條路徑，古老的語法，或使用<Switch>組件。

<BrowserRouter> 
    <Route path="/:filter?" component={App} /> 
</BrowserRouter>

其次，正如其他人所指出的，陣營路由器V4不再暴露params的路由處理組件，而是給了我們一個match道具使用。

const App = ({ match }) => { 
    return (
     <div> 
     <AddTodo /> 
     <VisibleTodoList filter={match.params.filter || 'all'} /> 
     <Footer /> 
     </div> 
    ) 
}

從這裏，有兩種方法可以讓你的內容同步與當前路線：使用mapStateToProps或使用特殊withRouter，既解決方案已經在理論家系列談到所以我不會重演他們這裏。

如果您仍然遇到麻煩，我建議您查看該系列已完成應用程序的存儲庫。

這兩者似乎做工精細（我只是測試他們兩個）。

來源

2017-06-12 22:23:46 indiesquidge

從react-router documentation,props.match.params是您的參數存儲的地方。

所以要訪問篩選器名稱，試試這個

const App = ({match}) => { 
    ... 
    <VisibleTodoList 
     filter={match.params.filter || 'all'} 
    /> 
    ... 
}

來源

2017-06-10 08:59:20 glhrmv

我試過，但過濾器沒有通過那裏？ –

從你的'Route'組件刪除正則表達式。讓它只是'Route path =「/：filter」。 – glhrmv

我嘗試過，但它會崩潰我的應用程序，我用它，因爲它是一個可選的參數，但我不知道爲什麼反應路由器無法檢測我的過濾器，即使它的工作，我解決它使用location.pathname，因爲它的工作我 –

我不知道爲什麼反應路由器無法檢測到我的過濾器，即使它的正常工作，我將因爲它的使用location.pathname解決了這個問題爲我工作。我認爲反應路由器不能檢測我的過濾器參數，因爲正則表達式，我期望，所以我把||在根上使用所有，但不幸的是，我無法檢測到，所以我使用了location.pathname。我將不勝感激這方面的建議，因爲我不確定我的路徑配置正則表達式。

來源

2017-06-10 09:20:15

反應路由器v4不接受路徑的正則表達式。您不會在文檔中的任何位置找到正則表達式。取而代之的是正則表達式，你可以只是<Switch>組件和匹配將要呈現的第一個中創建多個路線：

<BrowserRouter> 
    <Switch> 
    <Route path="/" component={App} /> 
    <Route path="/:filter" component={App} /> 
    </Switch> 
</BrowserRouter>

您也有一個錯誤在你的應用程序組件。你可以通過匹配屬性，而不是params屬性獲取PARAMS（未測試，但你想要的東西，這應該是更接近）：

const App = ({match}) => { 
    return ( 
     <div> 
     <AddTodo /> 
     <VisibleTodoList 
      filter={match.params.filter || 'all'} 
     /> 
     <Footer /> 
     </div> 
    ); 
}

上述所有的React Router V4 docs on ambiguous matches

來源

2017-06-11 22:12:07

如何獲得組件中的參數在響應路由器DOM V4中？

回答

相關問題