我用react-router v5创建了我的页面路由,一切都很好。如果我点击这个链接,它会把我带到这个页面,但是当我重新加载这个页面时,我得到一个“404|页面未找到”错误。
import React, { useEffect, useState } from 'react'
import Home from './dexpages/Home'
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import Dashboard from './dexpages/dashboard';
import Swapping from './dexpages/swapping'
import Send from './dexpages/send';
import Airdrops from './dexpages/airdrops'
function Main() {
const [mounted, setMounted] = useState(false)
useEffect(() => {
if (typeof window !== "undefined") {
setMounted(true)
}
}, [])
return (
<>
{mounted &&
<BrowserRouter>
<div className="min-h-screen" style={{ overflowX: 'hidden' }}>
<Routes>
<Route path="/airdrops" element={<Airdrops />} />
<Route path="/send" element={<Send />} />
<Route path="/swap" element={<Swapping />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</BrowserRouter>
}
</>
)
}
export default Main;
这是我的主要组成部分,我创建所有的路由。
This is the error I'm getting when I reload the page
2条答案
按热度按时间yuvru6vn1#
不要在next.js中使用React Router。
Next.js has its own routing mechanism,用于客户端路由和服务器端路由。
通过使用React Router,您可以通过自己的客户端路由绕过它,因此当您直接请求页面时(并依赖于服务器端路由),您会得到404 Not Found。
Next.js有a migration guide。
eoxn13cs2#
你的道路需要调整。对于主页,路由到
/
是可以的,但是对于其他页面,不需要反斜杠,分别从Airdrops,Send,Swapping和Dashboard路径中删除反斜杠,您应该没事。尝试下面的每一条路线。
<Route path="airdrops" element={<Airdrops />} />
<Route path="send" element={<Send />} />
<Route path="swap" element={<Swapping />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="/" element={<Home />} />