I have an issue with react-router-dom, NoMatch doesn’t accept URL like /foo/bar

Question

I'm using a classic configuration with React, Redux and React-router-dom. Everything work fine in dev. and production mode (localhost and production server). I just have an issue with NoMatch process.

• /good-path, it's work
• /wrong-path it's work and show the NoMatch component
• /wrong/path it's show a white page (404 status in network console with wrong url www.myWebsite.com/wrong/path)

I'm using : - react 16.8.4 - react-dom 16.8.4 - react-redux 6.0.1 - react-router-dom 5.0.1 - redux 4.0.1

This is a sample of my configuration :

<Provider store={store}>
  <Router>
    <div>

      <NavLink exact to="/">Home</NavLink>

      <NavLink exact to="/contact">Contact</NavLink>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact" component={Contact} />
        <Route component={NoMatch} />
      </Switch>

    </div>
  </Router>
</Provider>

Everything work properly but I expect the NoMatch component will be display for this kind of wrong path : /wrong/path (multiple slash url). In this case, index.html is loaded but I can't access to ressources like app.js, I've got a network error 404 with this kind of URL www.myWebsite.com/wrong/app.js

Thanks for your help.

Answer 1

A friend help me in this quest. I found the answer in Webpack config.

I need one more detail in the output setup, I had a publicPath:"/" :

// Set the output
  output: {
    // Path for the file
    path: path.resolve(__dirname, 'dist'),
    // Name for the output file
    filename: "app.js",
    //
    publicPath:"/"
  },

Thanks to my friend Georges and this post : https://stackoverflow.com/a/39278576/9945698