將字符串查詢放入React路由器的路徑中

我正在使用reactJS創建一個應用程序。我正在通過react-router定義路由。將字符串查詢放入React路由器的路徑中

樣本代碼如下：

<Router history={browserHistory()}> 
    <Route path="/" component={App}> 
     <Route path="taco/:name" component={Taco} /> 
    </Route> 
</Router>

，但我想用這樣的：

<Route path="taco?yourchoice/:name" component={Taco} />

，但我不能這樣做。

任何幫助，將不勝感激。

感謝

來源

2016-12-29 Ajay Kumar

我不認爲你需要說明那裏的查詢參數。 React-router在根組件上注入'location'屬性 – Kinnza

所以你想'taco？yourchoice = value'對嗎？ –

path="taco?yourchoice/:name是不是一個有效的路徑。由於您在yourchoice和:name之間包含正斜槓，因此如果您試圖在查詢後放置路徑段或捕獲yourchoice查詢參數值，我並不積極。

在前者的情況下，不能在URL的搜索片段後放置路徑片段，而需要重新排序路徑。對於後者，React Router在匹配當前位置以路由路徑時不會考慮搜索字符串。然而，該位置將被解析和查詢參數將是可利用的location對象上（其被注入爲道具到，給定路由的<Route>的component

所以：

<Route path="taco" component={Taco} />

當。用戶導航到所述地址：

example.com/taco?yourchoice=fish

的Taco組件將被渲染及其道具之一將是location

class Taco extends React.Component { 
    render() { 
    const { query } = this.props.location 

    return <div>A {query.yourchoice} taco</div> 
    } 
}

來源

2016-12-29 17:37:06

將字符串查詢放入React路由器的路徑中

回答

相關問題