Me gustaría que todas las rutas que no sean las registradas a continuación me dirijan a la página principal.
ejemplo:
testexample.com/contact-> Me devuelve a la página de contacto
testexample.com/sdlskdsd
-> La ruta no existe, volver a la página principal
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;Redirija las rutas desconocidas/no controladas a la ruta "/" con el componente Navigate .
<Route path="*" element={<Navigate to="/" replace />} /> Además, en RRDv6 todas las rutas ahora siempre coinciden exactamente, ya no hay ningún accesorio exact , por lo que deben eliminarse.
Ejemplo de rutas completas:
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>Agregar una ruta predeterminada
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;Otra forma de hacerlo
<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>