How to build a 404 page with react-router-dom v6

Question

I just upgraded to v6beta for react-router-dom because I wanted to organize my routes, but the 404 page is now broken:

export function AllRoutes(props) {

  return(
    <Routes>

      <Route path="/about-us">
        <Route path="contact">     <AboutContact/> </Route>
        <Route path="our-logo">    <AboutLogo/>    </Route>
        <Route path="the-mission"> <AboutMission/> </Route>
        <Route path="the-team">    <AboutTeam/>    </Route>
        <Route path="our-work">    <AboutWork/>    </Route>
      </Route>

      <Route path="/user">
        <Route path="sign-in"> <UserSignIn/> </Route>
        <Route path="sign-up"> <UserSignUp/> </Route>
      </Route>


      <Route path="/">
        <Home/>
      </Route>

      <Route >
        <NotFound/>
      </Route>

    </Routes>
  )
}

So everything works as expected (including the home page) except the not found page, which does not work even when adding path="/*" or path="*"

Any easy solution for this?

score 93 · Accepted Answer · answered Nov 10 '21 at 00:07

93

<Routes>

  // Use it in this way, and it should work:
  <Route path='*' element={<NotFound />} />

  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

answered Nov 10 '21 at 00:07

Haitham6373

1,139
8
10

10

Making the asterisk '*' route as the first route, you are hiding all other routes, hence all requests will go through the NotFound page. you must make it the last route. – Ahmed Hany Nov 10 '21 at 03:48
13

@AhmedHany. no, This will happen if you are using the old versions. now " > v6 " they changed the way it works. it's a lot better now. – Haitham6373 Nov 12 '21 at 16:59
2

@Haitham6373 so what's better to have it on top instead of bottom? what's the diff in v6? – stackoverflow Apr 07 '22 at 21:11
2

@Haitham6373 It doesn't work if I navigate to `/someRandomText/`. Note the trailing slash. – Akshay Rajpaul Jun 24 '22 at 16:26
Is this supposed to work with nested routes also? – Camilo Jul 09 '22 at 21:15
But it still returns status code 200, how to return 404 status? – Rajat Tyagi Apr 14 '23 at 05:32

score 27 · Answer 2 · answered Dec 09 '21 at 07:34

React Router v6 does not use exact attribute to match the exact routes. By default it matches the exact route. To match any value use "*" in the route path.

  <BrowserRouter>
    <div className="App">
      <Header />
    </div>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>    enter code here

how do you handle nested route? – lodey Dec 01 '22 at 18:36 — lodey, Dec 01 '22 at 18:36

score 11 · Answer 3 · answered May 21 '22 at 17:34

react router v6 don't have Switch so you need to declare path='*'

<BrowserRouter> 
  <Routes> 
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact/>} />
    <Route path="*" element={<NotFound/>} />
  </Routes>
</BrowserRouter>

gregory batte · Answer 4 · 2022-10-01T23:08:56.140

You can use

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

this way you have a redirection and a url replacement

for example :

import React from 'react'
import { BrowserRouter as Router, Routes , Route, Navigate } from 'react-router-dom'
import Home from '../../pages/Home'
import Account from '../../pages/Account'
import Contact from '../../pages/Contact'
import NotFound  from '../../pages/NotFound'


const AllRoutes= () => {
    return(
        <Router>
            <Routes>
                <Route path="/" element={ <Home /> } />
                <Route path="/Account" element={ <Account /> } />
                <Route path="/Contact" element={ <Contact /> } />
                <Route path="/404" element={ <NotFound /> } />
                <Route path="*" element={ <Navigate to="/404" replace />} />
            </Routes>
        </Router>
    )
}

export default AllRoutes

score 7 · Answer 5 · edited Nov 11 '22 at 15:50

7

You need to render a Route with a path of *, and React Router will make sure to only render it if none of the other Routes match.

If your 404 component name is PageNotFound:

<Route path="*" element={<PageNotFound/>} />

1 Stackblitz link (its implementation is a little bit different)

2 The easiest example is here

edited Nov 11 '22 at 15:50

kahlan88

101
1
8

answered Feb 09 '22 at 12:20

ajay_full_stack

494
7
13

How to build a 404 page with react-router-dom v6

5 Answers5

Linked