收到 404 | 页面未找到 Nextjs

Question

我使用 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;

这是我的主要组件，我在其中创建所有路由。

这是我重新加载页面时遇到的错误

Answer 1

不要将 React Router 与 next.js 一起使用。

Next.js 有自己的路由机制，可用于客户端路由和服务器端路由。

通过使用 React Router，您可以使用自己的客户端路由绕过它，因此当您直接请求页面（并依赖于服务器端路由）时，您会得到 404 Not Found。

Next.js 有一个迁移指南。