Why isn't the custom 404 page being used in my React app?

Question

The following code is App.js for React's SPA. I am using react-router-dom v5 to set up a 404 page, but it shows a default 404.

What is wrong with my code?

import React from 'react'
import { BrowserRouter, Redirect, Route, Switch, useLocation } from 'react-router-dom'
import ScrollToTop from '../src/pages/ScrollToTop.js'
import Header from "../src/pages/Header.js"
import Footer from "../src/pages/Footer.js"
import Top from '../src/pages/Top.js'
import Salon from '../src/pages/Salon.js'
// Redux
import { Provider } from "react-redux"
import store from '../src/store/redux.js'

function App() {  
  return (
    // ログインしているユーザーの情報を全ページに渡している。
    <Provider store={store}>
      <BrowserRouter>
        <ScrollToTop />
        <Header />
        <Switch>
          <Route exact path='/salon/:uid' component={Salon} />
          <Route exact path='/salon/:uid/:tag' component={Salon} />
          <Route exact path='/' component={Top} />
          <Route path='/*'><NoMatch /></Route>
        </Switch>
        <Footer />
      </BrowserRouter>
    </Provider>
  )
}

function NoMatch() {
  let location = useLocation();

  return (
    <div>
      <h3>
        No match for <code>{location.pathname}</code>
      </h3>
    </div>
  );
}

export default App

When viewed locally, NotMatch is displayed, but when deployed, the default is displayed... It is not a cache issue. — Maru, Mar 09 '22 at 14:09
Does this answer your question? [React-Router: No Not Found Route?](https://stackoverflow.com/questions/32128978/react-router-no-not-found-route) — isherwood, Mar 09 '22 at 14:09
I have tried without slash, but the situation remains the same. — Maru, Mar 09 '22 at 14:10
I don't see any overt issue with your code here. You say it works locally, as one would expect, but that it's not working when deployed. What investigation/debugging have you done? Where is the app deployed? Are the other `"/salon/XXXX"` routes working when deployed? — Drew Reese, Mar 09 '22 at 16:19

TheTisiboth · Answer 1 · 2022-03-09T15:09:38.950

1

Instead of displaying the component NoMatch as a child to Route, you can give it as a props:

<Route path='*' element={NoMatch} />

But actually I can't reproduce your issue, since when I copy your code in codesandbox, it is working as expected. Could you please try to provide a small reproducible example?

edited Mar 09 '22 at 15:09

answered Mar 09 '22 at 14:19

TheTisiboth

1,431
1
6
13

When viewed locally, NotMatch is displayed, but when deployed, the default is displayed... It is not a cache issue – Maru Mar 09 '22 at 15:05

score -1 · Answer 2 · answered Mar 09 '22 at 14:42

-1

<Route path='/salon/:uid' component={Salon} />
<Route path='/salon/:uid/:tag' component={Salon} />
<Route  path='/' component={Top} />
<Route path='*'><NoMatch /></Route>

answered Mar 09 '22 at 14:42

Harold Goundou

1
2

It will always meet the condition of the 3rd route here. You have to specify that it has to be exact, so it matches the 3rd route only if the url has just one slash – TheTisiboth Mar 09 '22 at 14:43

Why isn't the custom 404 page being used in my React app?

2 Answers2