[英]Getting 404 on a routed page with Vite and React Router v6
I am having a little issue with routing, my routing is working as intended however there is a slight quirk I can't figure out.我在路由方面遇到了一点问题,我的路由按预期工作,但是有一点我无法弄清楚。
I have two routes:我有两条路线:
domain.com
domain.com/logs
On domain.com
I have the following header.在
domain.com
上,我有以下标题。
<nav className="space-x-4">
<Link to="/">
<LinkButton btnText="Home" />
</Link>
<Link to="/logs">
<LinkButton btnText="Logs" />
</Link>
</nav>
Clicking through on these links works fine as expected.单击这些链接可以正常工作。 However when I am on
domain.com/logs
and refresh the page i get a 404. Below is how I have set up my routing.但是,当我在
domain.com/logs
上并刷新页面时,我得到一个 404。下面是我设置路由的方式。
import Logs from './routes/Logs'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/logs" element={<Logs />} />
</Routes>
</BrowserRouter>
)
I have come across this link: https://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment我遇到了这个链接: https ://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment
I am building from the whole dir so should include the routes
folder.我是从整个目录构建的,所以应该包括
routes
文件夹。
Now I am not sure if this is something to do with Vercel or Vite.现在我不确定这是否与 Vercel 或 Vite 有关。 Any suggestions would be great.
任何建议都会很棒。 Also to note this...works perfectly locally so must be a build thing.
还要注意这一点...在本地完美运行,因此必须是构建的东西。
The index.html that serves up your website when you visit domain.com
also needs to be served up when you visit domain.com/logs
your client side routing will then work.当您访问
domain.com
时为您的网站提供服务的 index.html 也需要在您访问domain.com/logs
时提供服务,然后您的客户端路由将起作用。
The react-router will then show your app in its correct state.然后,react-router 将以正确的状态显示您的应用程序。
More info can be found here describing deployments with client side routing https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing可以在此处找到更多信息,描述使用客户端路由的部署https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
im not familiar with vercel but they will probably have a wildcard option to serve the index document up for any unresolved routes.我不熟悉vercel,但他们可能会有一个通配符选项来为任何未解决的路线提供索引文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.