Saturday 6 May 2017

Issue with routing in react app

I have a web app. Back end with node and front end with React. Setup goes like this:

index.js
client
package.json

The client

Now, the client folder contains a front end web application, its contents are basically same as what you get when you type create-react-app.

Inside client there is a build folder which I created by running npm run build from within the client folder.

Server

Now, the index.js from my main folder acts as the node server, inside it I have a line like:

app.use(express.static(__dirname + "/client/build"));

Using this approach I have merged my node server and a client front end application (located inside client folder). You can see I told the server to serve files from the client/build.

All was working fine, till I encountered this.

If I click a react button in my client app which has manually calls my router using say:

this.props.router.push('/listmovies');

it correctly shows the page.

But if I type same page in URL address bar I get error:

Cannot GET /listmovies

The latter error I am pretty sure comes from node server. Because there is no listener for listmovies. You see basically I think node is intercepting the call and giving me an error. Whereas in my former case where I called router.push I get a correct page.

I hope I managed to explain my problem. Can someone help how to avoid this situation?



via giorgi moniava

No comments:

Post a Comment