react-router v4：你如何處理「/」頁面作爲其他頁面的同義詞？

Question

我有呈現多個URL相同的單頁的應用程序服務器：

/ 
/A 
/B 

我想作爲一個「主頁」頁面。 因此，對「/」或「/ A」的瀏覽器請求應顯示相同的內容。

特別是，我將鏈接到頁面A和B，並且我希望將鏈接A標記爲「/」和「/ A」的活動狀態。

所以我使用的是一樣的東西：

<NavLink to="/A" activeClassName='nav-active'>Go to A</NavLink> 
<NavLink to="/B" activeClassName='nav-active'>Go to B</NavLink> 

<Router> 
<Route path='/A' component={A} /> 
<Route path='/B' component={B} /> 
</Router> 

我將如何讓 「/」 作爲 「/ A」 的代名詞？我的嘗試：

• 增加另一個Route與path="/"：這導致兩個組件使用類似path="/(A)?"一個正則表達式顯示
• ：這顯示正確的組件，但鏈接IST未標記爲活動

我應該實現它作爲一個服務器端重定向，而不是（只是讓/重定向到/A，而不是服務於同一個頁面的內容？）

Answer 1

這似乎是一個Redirect的伎倆

<Router> 
<Route path='/A' component={A} /> 
<Route path='/B' component={B} /> 
<Route path='/' render={() => (
    <Redirect to='/A' /> 
)} /> 
</Router> 

Answer 2

您可以添加exact={true}

<Router> 
    <Route path='/' exact={true} component={A} /> 
    <Route path='/A' exact={true} component={A} /> 
    <Route path='/B' exact={true} component={B} /> 
</Router>