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='/' ponent={Content} />   
       <Route path='/user/:id' ponent={User} /> 
       <Route path='*' ponent={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 poenent.

My notfound ponent 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

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='/' ponent={Content} />   
       <Route path='/user/:id' ponent={User} /> 
       <Route path='*' ponent={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 poenent.

My notfound ponent 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

• javascript
• reactjs
• react-router

• You say "I tried to open localhost:3000/err but, it will not got to NotFound ponent.". What do you get instead? I did just try to use your code (using "react-router-dom": "^4.3.1), and it works just fine (on localhost:3000/err I get "404 Page Not Found"). – MarcoS Commented Jan 15, 2019 at 13:57
• @MarcoS i got Cannot GET /err – ketan Commented Jan 15, 2019 at 13:58
• Does your project pile successfully? I.e.: do you get something like Compiled successfully! on your yarn start mand? And, above all, something like You can now view my-app in the browser. ? – MarcoS Commented Jan 15, 2019 at 14:00
• @MarcoS Yes. i ｢wdm｣: Compiled successfully. – ketan Commented Jan 15, 2019 at 14:01
• Does localhost:3000/ works fine? – MarcoS Commented Jan 15, 2019 at 14:02

4 Answers 4

Finally, I solved by following solution.

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

output: {
    publicPath: '/'
},

devServer: {
    historyApiFallback: true
}

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.

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='/' ponent={Content} />   
       <Route path='/user/:id' ponent={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 './ponents/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.

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

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

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

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

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

  </Switch>
</Router>