React中如何在页面加载时默认显示AssignedComponent组件？

这是个很常见的路由配置需求，你的代码里目前只给/assigned路径绑定了组件，但页面首次加载时浏览器默认访问的是根路径/，所以Switch找不到匹配的路由规则，自然不会渲染任何组件。下面给你两种简单的实现方案：

方案一：添加根路径重定向 #

在Switch组件最前面添加一个匹配根路径的重定向规则，当用户访问根路径时自动跳转到/assigned，这样就能默认加载AssignedComponent了：

<div className="menubutton">
  <NavLink exact to="/assigned"><button>Assigned</button></NavLink>
  <NavLink to="/picked"><button>Picked</button></NavLink>
  <NavLink to="/completed"><button>Completed</button></NavLink>
</div>
<Switch>
  {/* 新增根路径重定向规则 */}
  <Route exact path="/" render={() => <Redirect to="/assigned" />} />
  <Route exact path='/assigned' component={() => <AssignedComponent />} />
  <Route exact path='/picked' component={PickingComponent} />
  <Route exact path='/completed' component={CompletedComponent} />
</Switch>

方案二：让AssignedComponent同时匹配根路径和/assigned #

如果你不想改变浏览器地址（保持地址栏显示/而不是跳转到/assigned），可以修改Assigned的路由规则，让它同时匹配根路径和/assigned：

<div className="menubutton">
  {/* 这里可以保留原有的"/assigned"路径，加上exact避免其他路径触发高亮 */}
  <NavLink exact to="/assigned"><button>Assigned</button></NavLink>
  <NavLink to="/picked"><button>Picked</button></NavLink>
  <NavLink to="/completed"><button>Completed</button></NavLink>
</div>
<Switch>
  {/* 修改路径为数组，同时匹配根路径和/assigned */}
  <Route exact path={["/", "/assigned"]} component={() => <AssignedComponent />} />
  <Route exact path='/picked' component={PickingComponent} />
  <Route exact path='/completed' component={CompletedComponent} />
</Switch>

两种方案都能实现你的需求，你可以根据是否需要改变地址栏显示来选择。

内容的提问来源于stack exchange，提问作者Nirmal