react-router-dom | path="*" 在 vercel 上不起作用

Question

我目前正在使用 React 和 React Router Dom 开发一个应用程序，并且正在将其部署在 Vercel 上。到目前为止，除了 404 错误路由之外，我的所有路由都按预期运行。我遇到了问题，正在寻求帮助来解决它。

在我的 React 应用程序中，我使用 React Router Dom 设置了各种路由，它们似乎工作正常。然而，设计用于处理 404 错误的特定路由并未按预期运行。我非常感谢任何有关故障排除和解决此问题的帮助或指导。

App.jxs代码：

import './App.css'

import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom"
import { onAuthStateChanged } from "firebase/auth"

// Hooks
import {useState, useEffect} from "react"
import { useAuthentication } from './hooks/useAutentication.jsx'

// Pages
import Home from "./pages/Home/Home.jsx"
import About from "./pages/About/About.jsx"
import CreatePost from './pages/CreatePost/CreatePost.jsx'
import Dashboard from './pages/Dashboard/Dashboard.jsx'
import Login from "./pages/Login/Login.jsx"
import Register from "./pages/Register/Register.jsx"
import Search from './pages/Search/Search.jsx'
import Post from './pages/Post/Post.jsx'
import EditPost from './pages/EditPost/EditPost.jsx'
import NotFound from './pages/NotFound/NotFound.jsx'

// Components
import NavBar from "./components/NavBar.jsx"
import Footer from "./components/Footer.jsx"


//Context
import { AuthProvider } from "./context/AuthContext.jsx"

function App() {
  const [user, setUser] = useState(undefined)
  const {auth} = useAuthentication()

  const loadingUser = user === undefined

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setUser(user)
    })
  }, [auth])

  if(loadingUser){
    return <p>Carregando...</p>
  }

  return (
    <div className='w-full'>
      
      <AuthProvider value={{ user }}>
        <BrowserRouter>
          <NavBar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={!user ? <Login /> : <Navigate to="/" />} />
            <Route path="/register" element={!user ? <Register /> : <Navigate to="/" />} />
            <Route path='/posts/create' element={user ? <CreatePost /> : <Navigate to="/login" />} />
            <Route path='/dashboard' element={user ? <Dashboard /> : <Navigate to="/login" />} />
            <Route path='/search' element={<Search />} />
            <Route path='/posts/:id' element={<Post />} />
            <Route path='/posts/edit/:id' element={user ? <EditPost /> : <Navigate to="/login" />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
          <Footer />
        </BrowserRouter>
      </AuthProvider>
    </div>
  )
}

export default App

NotFound.jsx：

import { useQuery } from '../../hooks/useQuery.jsx'
import { Link } from 'react-router-dom'

const NotFound = () => {
    const query = useQuery()
    

    return (
        
        <div className='flex flex-col justify-center'>
            <div className='w-full mx-auto bg-slate-900 h-42 md:h-40 md:mb-20'>
                <h2 className='my-10 flex flex-col mx-auto text-xl w-80vw uppercase font-bold text-slate-300
                md:text-center'>Resultados apartir da busca por: <span className='lowercase text-center mt-5'>{query}</span></h2>
            </div>
            
            <div>
              <div className='flex flex-col justify-center mx-auto w-80vw my-10'>
                  <p className='text-center text-2xl font-bold uppercase mb-10'>Não foram encontrados posts a partir da sua busca</p>
                  <Link className="w-30vw mx-auto my-2 bg-red-600 py-2 rounded-md hover:text-red-900 transition-all duration-500 text-slate-200 text-center
                  md:w-20" to='/'>
                      Voltar
                  </Link>
              </div>  
            </div>
        </div>
    )
}

export default NotFound

我必须修改我的 App.jsx 代码，或者 vercel 网站上的某些内容？

Answer 1

只需将此代码放在您的根应用程序上即可：

vercel.json：

{
    "rewrites": [
        {"source": "/(.*)", "destination": "/"}
    ]
}