0

I have a create-react app with react-router-dom. It works quite well if I start from the root (i.e. '/') and then follow links defined in Links. But if I try to load the app not from the root path, it says 

Cannot GET /<path>

As I understand, this should be set on the server-side (I am working on regular localhost:9000). Or not? Anyway, how to achieve this practically?

Notice, this is not relevant to the base path resolving problem, described here: Can I set a base route in react-router

UPDATED:

I suppose, there should be a solution similar to using .htaccess. But I still cannot figure out how to apply it to create-react-app. Or, maybe, it is possible to set an appropriate option in webpack.config.js?

Update 2. Repo is here: https://github.com/srgg6701/react-mini

marzelin
  • 10,790
  • 2
  • 30
  • 49
srgg6701
  • 1,878
  • 6
  • 23
  • 37
  • seems like duplicate of https://stackoverflow.com/questions/38196448/can-i-set-a-base-route-in-react-router – marzelin Sep 15 '18 at 09:06
  • Possible duplicate of [Can I set a base route in react-router](https://stackoverflow.com/questions/38196448/can-i-set-a-base-route-in-react-router) – marzelin Sep 15 '18 at 09:07
  • @marzelin This is not a duplicate, since he is not trying to set a base route, but rather solve a problem with the routing itself when using a server, (webpack-dev-server). – c-chavez Sep 15 '18 at 12:19
  • @c-chavez oh yeah, now I get it, OP wants to make dev-server support routing. Dev server routing just works with apps created with CRA, but OP doesn't use CRA but has his own webpack configs. Ok, I'll give you +1. – marzelin Sep 15 '18 at 12:46

1 Answers1

2

Since all your routes are handled by a router, which normally sits in the '/' (index) path, you would need to fallback to your index so that the router knows where to redirect. This can be done by setting the paths on your server side, but I've found this package to be particularly helpful in these matters.

Webpack

If you are using webpack-dev-server, you should know that it serves the following (taken from official docs):

Use webpack with a development server that provides live reloading. This should be used for development only.

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

...

Either method will start a server instance and begin listening for connections from localhost on port 8080.

This means that a server will be running listening to localhost. You can either solve this by using the previous approach (server side coding or middleware) or by using the history api fallback option:

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --config webpack.dev.config.js",
    "build": "webpack"
},

Have a look at the official documentation of webpack for more info on all of its components.

c-chavez
  • 7,237
  • 5
  • 35
  • 49
  • Thank you, this probably could help, but as far as I can see, this involves the server-side coding, particularly express middleware, doesn't it? – srgg6701 Sep 15 '18 at 10:08
  • @srgg6701 Your error looks like the server is not handling the correct get request, so this answer reflects a server side approach which will involve server side coding. Yes, this is meant to be used as middleware in your server. If this is not your case (meaning that you are not using any server side), then maybe something is misconfigured in your app, or maybe there can be some configurations that can be done to the router. Can you post your package.json and the example of your router and routes to the question please? – c-chavez Sep 15 '18 at 10:42
  • @srgg6701 I've updated my answer based on your code. – c-chavez Sep 15 '18 at 12:18