Snowpack搭建的React项目React Router刷新后页面不渲染如何解决

问题根因 #

• 存在嵌套的BrowserRouter：你已经在index.jsx中声明了带basename="admin"的顶层Router，Pages组件内不需要再套一层BrowserRouter，两层路由会导致路径匹配逻辑混乱。
• 静态资源引用为相对路径：index.html中引用js、css等资源用了相对路径，刷新嵌套路径（比如/admin/pages/xxx）时，浏览器会从当前路径层级加载资源，自然就会请求不存在的/admin/index.js返回404。
• Snowpack配置存在冲突：mount配置同时把dist和src目录挂载到根路径，会导致资源查找逻辑异常。

修复步骤 #

1. 删除嵌套BrowserRouter并修正子路由路径 #

修改Pages.jsx，去掉多余的<BrowserRouter>标签，同时因为外层路由已经配置了basename="admin"，子路由不需要再加/admin前缀：

<div className="container">
  <div className="pages">
    <h2>Pages</h2>
    <Switch>
    {
      pages.length !== 0
      ? pages.map(page => {
        return <Route exact key={page.id} path={'/pages/' + page.path}><Page /></Route>
      })
      : null
    }
    </Switch>
  </div>
</div>

2. 将index.html的资源路径改为绝对路径 #

找到项目根目录的index.html，所有引用静态资源的路径开头加/，比如将<script src="index.js"></script>改为<script src="/index.js"></script>，确保不管在哪个路径下，资源都从站点根目录加载。

3. 调整Snowpack配置 #

修改snowpack.config.mjs，修正mount配置，新增构建基础路径配置：

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    // dist为构建输出目录，不需要配置在mount中，仅保留src挂载规则
    src: "/"
  },
  routes: [
    {
      match: 'routes',
      src: '.*',
      dest: '/index.html',
    },
  ],
  plugins: [
    "@snowpack/plugin-sass",
    "@snowpack/plugin-react-refresh",
    "@snowpack/plugin-dotenv",
  ],
  // 新增构建基础路径配置，适配admin前缀
  buildOptions: {
    baseUrl: '/admin/'
  }
}

4. 补充顶层路由重定向规则 #

在index.jsx的Switch末尾添加根路径重定向规则，避免访问/admin时无匹配路由：

import { Redirect } from 'react-router-dom'

<Router basename="admin">
 <Switch>
  <Route path="/pages" component={Pages} />
  <Route exact path="/login" component={Login} />
  <Redirect exact from="/" to="/login" />
 </Switch>
</Router>

修改完成后重启Snowpack开发服务即可解决所有页面刷新404的问题。

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