0

I know this question has been asked too many times before and I have spent hours going through them but nothing worked in my case.

First, this is my setup:

package.json - dependencies

"dependencies": {
    "contentful": "^8.1.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^4.1.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "webpack": "^5.16.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },

webpack.config.js -- removed irrelevant stuff

    module.exports = {
       mode: "development",
       entry: {
          index: "./src/index.js",
          print: "./src/print.js",
       },
       devtool: "source-map",
       output: {
          path: path.resolve(__dirname, "dist"),
          filename: "index_bundle.[contenthash].js",
       },
       devServer: {
          historyApiFallback: true,
       },
    };

** code **

const App = () => {
   return (
      <>
         <Router>
            <Switch>
               <Route exact path="/" children={<Home />}></Route>
               <Route path="/rooms" children={<Rooms />}></Route>
               <Route path="/rooms/:id" children={<SingleRoom />}></Route>
            </Switch>
         </Router>
      </>
   );
};

export default App;

All URLs are working fine except when I navigate to, for example: http://localhost:8080/rooms/1 .. It returns 404 not found.

Zaki
  • 107
  • 9
  • Did you try inverting `/rooms` to second and `/rooms/:id` to first? I am aware of such issues in server rendered is apps – Gary Jan 21 '21 at 08:16
  • @Gary if you are referring to changing the order of commands, I did try it but it produced the same error. – Zaki Jan 21 '21 at 08:22
  • Did your try this? https://stackoverflow.com/questions/32128978/react-router-no-not-found-route – Gary Jan 21 '21 at 09:04

1 Answers1

0

Where you are referring to the bundle script, be sure to put a '/' in front.

 <script src="/bundle.js"></script>
Knight Fury
  • 1