部分重定向陣營，路由器4.0.0.alpha6

在反應路由器4.0.0.alpha6，我要做到這一點：部分重定向陣營，路由器4.0.0.alpha6

site.com/en -> site.com 
site.com/en/hi -> site.com/hi 
site.com/en/hi/there -> site.com/hi/there

我將如何做呢？我試了很多從文檔，但似乎無法讓它悲傷地工作...

謝謝你的閱讀！

來源

2017-01-25 Pascal Pixel

是否只想重定向url？或渲染不同的組件？你能發表你試過的嗎？也許這會解釋你想要做的更多 – azium

注意：當您提到v4 alpha時，我將使用測試代碼（未發佈，但可通過回購v4分支獲得）。

基本上你想要做的是找出與段en開始任何pathname，從URL段的其餘部分分割它，並重定向到無論pathname的其餘部分。

作爲一個正則表達式，你可以將它與/^\/en(\/.*)?$/匹配。 React Router使用path-to-regexp來匹配支持正則表達式的路徑名，但React Router不支持（至少不是直接）。不過，您可以使用未命名的參數配置一個與此匹配的路徑。

<Route path='/en(/*)' component={EnRedirect} />

這應該匹配/en，/en和/en/hi，但不/english。接下來，在組件中，您需要將匹配的url拆分爲段，刪除en，重新加入段並重定向。

const EnRedirect = ({ match }) => { 
    const parts = match.url.split('/') 
    parts.splice(1,1) 
    const to = parts.join('/') 
    return <Redirect to={to} /> 
}

來源

2017-01-25 05:59:49

謝謝你的回答！你可以告訴我你使用的＃v4分支版本的提交號碼，因爲我似乎無法找到將要安裝的提交。 –

如果您正在嘗試使用NPM進行安裝，那將無法正常工作。你需要'git clone' React Router，檢查'v4'分支，進入'packages/react-router'目錄（React Router已經被轉換爲多個包：'react-router'，'react-router -dom'和'react-router-native'），'npm link'軟件包，然後轉到你的項目和'npm link react-router'。它比'npm install react-router @ next'多了很多步驟，但是在測試版發佈之前，您需要在項目中使用測試代碼。 –

話雖如此，我認爲你可以通過將'Route'改爲'Match'，'path'改成'pattern'，並將'match.url'改成'match.pathname'來使得它在alpha中工作。 –

部分重定向陣營，路由器4.0.0.alpha6

回答

相關問題