如何在 React JS 中制作相同的 URL 方案但不同的路線和組件

Question

我有一些動態和 static URLS，我很清楚，但對如何在同一路由結構上調用不同的組件感到困惑，請看下面

**必需的路線結構：**

https://example.com/:pagename (dynamic)
https://example.com/:countryname (dynamic)

https://example.com/about-us (static)

當前路線：

<Route path='/:pageName' component={Page} exact />
<Route path='/:countryname' component={Country} exact />
<Route path='/about-us' component={AboutUs} exact />

謝謝

Answer 1

更好的方法是更改您的 URL 邏輯，如下所示：

https://example.com/page/:pagename或https://example.com/p/:pagename

https://example.com/country/:countryname或https://example.com/c/:countryname

和路線：

<Route path='/page/:pageName' component={Page} exact />
<Route path='/country/:countryname' component={Country} exact />

路由算法在與查詢匹配的第一個 URL 模式處停止。 考慮以下兩個 URL：

• https://example.com/homepage
• https://example.com/germany

這兩個 URL 都匹配第一個模式（ https://example.com/:pagename ），因為匹配算法不會知道“germany”不是頁面名稱。

如果你不能 go 這種方式你可以構建一個子路由組件來檢查 example.com 之后的第一個參數是否匹配任何國家名稱或任何頁面名稱，並基於該呈現相應的組件：

    <Route path='/:pageNameOrCountryNameNotSure' component={SubRouter} exact />

但是，這不是一個干凈的解決方案，不推薦使用。