Issue with routing in react app

Question

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

index.js (the server)
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 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 and hit ENTER I get error:

Cannot GET /listmovies

The latter error I am pretty sure comes from node server. Because there is no listener for listmovies in index.js (and there should not be). 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 solve this issue?

can you add your index.js configuration? it looks like you missing something there — QoP
– QoP, Commented May 6, 2017 at 22:15
@QoP The react app is contained in "client" folder as I stated in my question. And it was created using create-react-app starter. — gmoniava
– gmoniava, Commented May 6, 2017 at 22:19
You have to redirect all the unmatched routes to your index.html, something like this should work app.get('*', (req, res) => res.sendFile(__dirname + '/client/build/index.html'));, add it as the last route, before app.listen(...) — QoP
– QoP, Commented May 6, 2017 at 22:26

mrinalmech · Accepted Answer · 2017-05-07 03:03:39Z

1

You have to make the express application redirect all requests to the main React file so react-router can take over. Something like this below the app.use.

  app.get('*', function(req, res) {
        res.sendFile(__dirname + '/client/build/index.html')
    })

This basically handles all wildcards and points it to the index.html. Mind you if you are also implementing API routes on the express app have them above this wildcard statement because otherwise it will intercept them and treat them as client side react-router routes instead of server-side API routes.

answered May 7, 2017 at 3:03

mrinalmech

2,1751 gold badge22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with routing in react app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related