响应路由器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

更新

如果您正在使用Netlify，您可以这样做，以便能够在路由中使用<BrowserRouter>并避免散列#。

在构建文件夹中创建一个名为_redirects的文件，其内容如下

/* /index.html 200    

Answer 2

您有不同的解决方案，其中之一是在htaccess中放置以下内容：

​

<ifModule mod_rewrite.c>
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^c(.*) index.html [NC,L]
</ifModule>

​

如果你仍然有一个错误，把你真正的网址放在主页上：“”，你的package.json，例如：https://wildreds.es/，这样browserRouter就能很好地检测到你，小心破解。