React router not open 404 not found page

Question

I created following with react router.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

class Main extends Component {

render() {   
        return ( 
    <Router>
     <Switch>
       <Route exact path='/' component={Content} />   
       <Route path='/user/:id' component={User} /> 
       <Route path='*' component={NotFound} />
     </Switch>  
    </Router>
    );
}

export default Main

I want to open Notfound page if any invalid url.

I tried to open localhost:3000/err but, it will not go to NotFound compoenent.

My notfound component is simple.

import React from 'react';

const NotFound = () => (
    <h2>404 Page Not Found</h2>
);

export default NotFound;

I am using "react-router-dom": "^4.3.1

Answer 1

Finally, I solved by following solution.

Inside my webpack config file ( webpack.config.js ) i added following:

output: {
    publicPath: '/'
},

devServer: {
    historyApiFallback: true
}

Answer 2

In order for client-side routing to work, the server needs to always return the same index.html for all routes.

So, localhost:3000/err needs to return your index.html with the client-side router javascript.

Answer 3

Have you tried using Redirect? I am using this in my app and it works perfectly fine. Here is the updated code for your reference-

import {Route, Switch, Redirect } from 'react-router-dom'; 

class Main extends Component {

render() {   
        return ( 
     <Switch>
       <Route exact path='/' component={Content} />   
       <Route path='/user/:id' component={User} /> 
       <Route path="/not-found" render={props => <NotFoundPage />} />
       <Redirect to="not-found" />
     </Switch>  
    );
}

export default Main

Enclose your App inside BrowserRouter.

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './components/app.js'
import styles from './styles/style.css'
import { store } from './stores/store'

ReactDOM.render((
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
), document.getElementById('root'))

Let me know if this helps.

Answer 4

"react-router-dom": "^5.1.2",

<Router history={history}>
  <Switch>
    <Route exact path={[routes.user.details]} component={UserProfile} />
    <Route exact path={[routes.category.collection]} component={CategoryCollection} />
    <Route exact path={[routes.category.details]} component={CategoryDetails} />
    <Route exact path={[routes.product.collection]} component={ProductCollection} />
    <Route exact path={[routes.product.details]} component={ProductDetails} />

    <Route exact path={routes.auth.login} component={Login} />
    <Route exact path={routes.auth.register} component={Register} />
    <Route exact path={routes.auth.resetPassword} component={ResetPassword} />

    <Route
      path="*"
      component={() => {
        if (user.id) {
          return <Redirect to={routes.user.details} />;
        }

        return <Redirect to={routes.auth.login} />;
      }}
    />

  </Switch>
</Router>