React 路由器 V6 仅适用于根路径

Question

这就是我在 App.jsx 文件中设置代码的方式：

export const App = () => {
    return (<>
        <Router>
            <Routes>
                <Route path="/" element={<Home/>} />
                <Route path="/account" element={<MyAccount/>} />
            </Routes>
        </Router>
    </>)
}

当我运行我的本地 snowpack 服务器上的 React 应用程序在我转到 http://localhost:8080 时它会正确加载到 home 组件中。然而，当我去 http://localhost:8080/account Chrome 说：

找不到此本地主机页面

找不到网址为：http://localhost:8080/account

HTTP 错误 404

有没有人有什么想法？

更新 1

我修改了 config.js 文件中的 DEFAULT_CONFIG 变量，如下所示，但我仍然遇到同样的问题。这是执行此操作的正确方法吗？

//in node_modules/snowpack/lib/config.js
...
const DEFAULT_CONFIG = {
    ...
    routes: [
        {
            "match": 'routes',
            "src": '.*',
            "dest": '/index.html',
        },
    ],
}

分辨率

我在我的应用程序的根文件夹中创建了一个名为 snowpack.config.mjs 的单独文件，并添加了下面的代码

// in snowpack.config.mjs
export default {
    routes: [
        {
        match: 'routes',
        src: '.*',
        dest: '/index.html',
        },
    ],
};

Answer 1

这是 client-side 路由的一个非常典型的问题（服务器不知道有效的 client-side 路由）。

通常，您会在服务器上定义回退路由以将客户端带回 index.html，其中 client-side 路由可以发挥作用。

对于积雪：

// snowpack.config.mjs
export default {
  routes: [
    {
      match: 'routes',
      src: '.*',
      dest: '/index.html',
    },
  ],
};

见https://www.snowpack.dev/guides/routing#scenario-1-spa-fallback-paths

请注意，当您推送到生产环境时，您必须对托管您的应用程序的任何服务器执行相同的操作。

React 路由器 V6 仅适用于根路径

React router V6 only working for root path

reactjs

react-router

react-router-dom