React如何配置首页路由？根路径仅显示页眉页脚无内容

当前路由配置未定义根路径/的匹配规则，访问http://localhost:3000时，<Switch>组件遍历所有路由规则无命中项，因此不会渲染任何路由对应的页面主体，仅渲染路由外层固定挂载的页眉、页脚组件。

根据实际业务需求二选一即可：

方案1：根路径直接渲染首页 #

在<Switch>内新增根路径路由，必须添加exact精确匹配属性，防止宽泛的根路径规则提前拦截其他子路由匹配。
修正后代码：

return (
  <>
    <Router>
      <Headernavbar />
      <Switch>
        <Route exact path='/' component={Homepage} />
        <Route path='/sidenavigation/pages/galleries/home/imagegallery' component={Homepage} />
        <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' component={Abstractcollection} />
        <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' component={Documentarycollection} />
      </Switch>
      {/* 全局页脚组件 */}
    </Router>
  </>
);

方案2：根路径自动重定向到现有首页地址 #

如果需要统一访问入口，让用户访问根地址时自动跳转到已配置的长路径首页，可以用路由重定向实现：

// 先从依赖包引入Redirect组件
import { Switch, Route, Redirect } from 'react-router-dom';

return (
  <>
    <Router>
      <Headernavbar />
      <Switch>
        <Redirect exact from='/' to='/sidenavigation/pages/galleries/home/imagegallery' />
        <Route path='/sidenavigation/pages/galleries/home/imagegallery' component={Homepage} />
        <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' component={Abstractcollection} />
        <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' component={Documentarycollection} />
      </Switch>
      {/* 全局页脚组件 */}
    </Router>
  </>
);

如果你用的是React Router v6版本，API有变更，对应配置写法调整如下：

• 移除<Switch>，替换为<Routes>
• 移除组件形式的component/render属性，统一用element属性传入JSX
• 所有路由默认开启精确匹配，不需要手动加exact
• <Redirect>替换为<Navigate>组件
  v6版本配置示例：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

return (
  <>
    <Router>
      <Headernavbar />
      <Routes>
        {/* 根路径直接渲染首页 */}
        <Route path='/' element={<Homepage />} />
        {/* 重定向写法放开注释即可使用 */}
        {/* <Route path='/' element={<Navigate to='/sidenavigation/pages/galleries/home/imagegallery' replace />} /> */}
        <Route path='/sidenavigation/pages/galleries/home/imagegallery' element={<Homepage />} />
        <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' element={<Abstractcollection />} />
        <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' element={<Documentarycollection />} />
      </Routes>
      {/* 全局页脚组件 */}
    </Router>
  </>
);

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