How to set up React App on server so that I have links how I want them?

Question

I made a React WebShop for testing using a tutorial and wanted to integrate it into my website to test, but unfortunately every time I do so, the app gets messed up. Meaning the links make no sense. For instance I would like that if I type in mywebsite.com/Shop that the Shop is displayed. But at the moment when I enter the directory where the app sits (address above), I get back the default component for the error code 404 and not my product overview.

Sorry, but I can't really explain what I mean very well.

Git: https://github.com/Arborem123/webshop

Answer 1

Currently your routing is setup like this:

<Switch>
  <Route exact path="/" component={ProductList} />
  <Route path="/details" component={Details} />
  <Route path="/cart" component={Cart} />
  <Route component={Default} />
</Switch>

There is no /shop path exposed to the router, so it will end up rendering your Default component when it falls through the Switch without matching any other paths. If you want to expose a /shop route, you'll need to change your Switch to something like this:

<Switch>
  <Route path="/shop" component={ProductList} />
  <Route path="/details" component={Details} />
  <Route path="/cart" component={Cart} />
  <Route exact path="/" component{HomePage}
  <Route component={Default} />
</Switch>

You'll notice I changed your base route / to point to a HomePage component that I know you have not implemented. It's just there as an example for how to complete your routing setup.