如何在 react router dom 中将不存在的路由重定向到主页？

Question

除了下面注册的路线，我希望所有路线都能将我引导至主页。

示例：

testexample.com/contact

-> Returns我到联系页面

testexample.com/sdlskdsd

-> 路由不存在，return 到主页


import { 
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom'
import Footerpage from './components/footerpage/Footerpage';
import Navegation from './components/navegation/Navegation';
import Homepage from './pages/Homepage';
import Contact from './pages/contact/Contact';
import Bookpage from './pages/bookpage/Bookpage';
import Success from './pages/contact/status/Success';
import Error from './pages/contact/status/Error';

function App() {
  return (
    <BrowserRouter>
      <Navegation />
        <Routes>
          <Route path='/' exact element={<Homepage />} />
          <Route path='/contact' exact element={<Contact />} />
          <Route path='/contactsuccess' exact element={<Success />} />
          <Route path='/contacterr' exact element={<Error />} />
          <Route path='/bookpage' exact element={<Bookpage />} />
        </Routes>
      <Footerpage />
    </BrowserRouter>  
  );
}

export default App;

Answer 1

添加默认路由


import { 
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom'
import Footerpage from './components/footerpage/Footerpage';
import Navegation from './components/navegation/Navegation';
import Homepage from './pages/Homepage';
import Contact from './pages/contact/Contact';
import Bookpage from './pages/bookpage/Bookpage';
import Success from './pages/contact/status/Success';
import Error from './pages/contact/status/Error';

function App() {
  return (
    <BrowserRouter>
      <Navegation />
        <Routes>
          <Route path='/' exact element={<Homepage />} />
          <Route path='/contact' exact element={<Contact />} />
          <Route path='/contactsuccess' exact element={<Success />} />
          <Route path='/contacterr' exact element={<Error />} />
          <Route path='/bookpage' exact element={<Bookpage />} />
          <Route element={<Homepage />} />
        </Routes>
      <Footerpage />
    </BrowserRouter>  
  );
}

export default App;

Answer 2

另一种方法

 <Routes>
      <Route path='/' exact element={<Homepage />} />
      <Route path='/contact' exact element={<Contact />} />
      <Route path='/contactsuccess' exact element={<Success />} />
      <Route path='/contacterr' exact element={<Error />} />
      <Route path='/bookpage' exact element={<Bookpage />} />
      <Route path='/*' element={<Homepage />} />
    </Routes>

Answer 3

将 unknown/unhandled 路由重定向到具有 Navigate 组件的 "/" 路径。

<Route path="*" element={<Navigate to="/" replace />} />

此外，在 RRDv6 中，所有路由现在总是完全匹配，不再有任何 exact 属性，所以这些都应该被删除。

完整路线示例：

import { 
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from 'react-router-dom';

...

<Routes>
  <Route path='/' element={<Homepage />} />
  <Route path='/contact' element={<Contact />} />
  <Route path='/contactsuccess' element={<Success />} />
  <Route path='/contacterr' element={<Error />} />
  <Route path='/bookpage' element={<Bookpage />} />
  <Route path="*" element={<Navigate to="/" replace />} /> // <-- redirect
</Routes>

如何在 react router dom 中将不存在的路由重定向到主页？

How to do non-existent routes redirect to homepage in react router dom?

javascript

reactjs

react-router

react-router-dom