React router dom v-6 不适用于构建版本

Question

我正在开发一个具有如下路径的聊天应用程序

            <Routes>
                <Route path="/" element={<WelcomeScreen />} />
                <Route path="channels" element={<Home />} />
                <Route path="channels/:id" element={<Home />} />
                <Route path="*" element={<Navigate replace to="/" />} />
            </Routes>

一旦用户通过身份验证，他们就会从欢迎屏幕重定向到主页，其中包含 /channels 上的所有聊天记录。因此，如果用户要访问 /channels 或在 404 的情况下，我将重定向到 / 路径。

当我运行在本地主机上时一切正常，但是一旦我将它托管在 netlify 上并且当我在 /channels 刷新而不是重定向时，我收到 404 消息并且 <Route path="*" element={<Navigate replace to="/" />} /> 没有没用。

谁能告诉我这是什么问题？任何帮助将不胜感激。

Answer 1

将您的 <BrowserRouter> 更改为 <HashRouter>。它允许刷新单个页面而不会出现 404 错误。

参考：https://reactrouter.com/docs/en/v6/api#reference

React router dom v-6 不适用于构建版本

React router dom v-6 not working on build version

reactjs

react-router-dom

netlify