I would like all routes other than those registered below to direct me to the main page.

example:

testexample/contact

-> Returns me to the contact page

testexample/sdlskdsd

-> Route does not exist, return to main page

import { 
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom'
import Footerpage from './ponents/footerpage/Footerpage';
import Navegation from './ponents/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;

I would like all routes other than those registered below to direct me to the main page.

example:

testexample./contact

-> Returns me to the contact page

testexample./sdlskdsd

-> Route does not exist, return to main page

import { 
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom'
import Footerpage from './ponents/footerpage/Footerpage';
import Navegation from './ponents/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;

• javascript
• reactjs
• react-router
• react-router-dom

• 2 Does this answer your question stackoverflow./questions/51457480/… – tenshi Commented May 2, 2022 at 18:30

3 Answers 3

Redirect unknown/unhandled routes to the "/" path with the Navigate ponent.

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

Also, in RRDv6 all routes are now always exactly matched, there is no longer any exact prop, so these should all be removed.

Full routes example:

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>

Add a default route

import { 
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom'
import Footerpage from './ponents/footerpage/Footerpage';
import Navegation from './ponents/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;

Another way of doing it

 <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>