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>