react-router-v4 - react-router v4：你如何处理“/”页面作为其他页面的同义词？

Question

我有一个服务器为多个 URL 呈现相同的单页应用程序：

/
/A
/B

我希望 A 充当“主页”页面。因此，对“/”或“/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”的同义词？我尝试了什么：

• 添加另一个Routewith path="/"：这会导致显示两个组件
• 使用像这样的正则表达式path="/(A)?"：这将显示正确的组件，但链接未标记为活动

我是否应该将其实现为服务器端重定向（只是/重定向到/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>