获取 404 |找不到页面 Nextjs

Question

我使用 react-router v5 创建了我的页面路由，一切正常。如果我单击 link，它会将我带到页面，但是当我重新加载页面时，我在页面上收到“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

Answer 1

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

Next.js has its own routing mechanism 用于 client-side 路由和 server-side 路由。

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

Next.js 有 a migration guide.

Answer 2

您的路径需要调整。对于主页，可以路由到 /，但是对于其他页面，不需要反斜杠，分别从 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 />} />

获取 404 |找不到页面 Nextjs

Getting 404 | Page Not found Nextjs

javascript

reactjs

react-router

next.js