How to use react-router with express router?

1
votes

I have project with client and server folderds

Client: i have react redux react-router app, port: localhost:3000

Server: i have express server with express.Router() and my app bundled with webpack from client and this app avalable on '/' port: localhost:3001

When i am starting webpack-dev-server in CLIENT(port:3000) folder every route works as i wants then i am starting express server with nodemon SERVER(port:3001) and facing this problem :

Problem i faced is when i follow any Route on SERVER(port:3001) except '/' i am getting 404 error by Express. So can anyone explain me how to use react-router and express together, so all my routes from bundled app will works as they works in webpack-dev-server while development

For example we have 2 Routes:

  <Route exact path="/" component={Home} />
  <Route path="/test" component={Test} />

And we Have server.js with express app:

 app.get('*', (req,res) => 
 res.sendFile(path.join(__dirname+'/public/index.html')))

When i am getting 'localhost:3001/' Express sending index.html Then i am getting 'localhost:3001/test' And Express throw Error 404

1
reactjsexpressreact-routerreact-reduxreact-router-v4
Possible duplicate of How do I redirect into react-router from express? - Agney
react router will know nothing about what's going on server side. You have to explicitly send http requests to the server via some RESTful calls ( usually via an API or service). Then you can serve data from your back end to the front end - Will Ru
@BoyWithSilverWings its only redirect i am asking how to use express.Router() with react-router - John Rotten
` when i follow any Route on ` Can you explain what do you mean by this ? - Panther
@Panther edited - John Rotten

1 Answers

0
votes

add this to your Nginx app config:

location /{
...
try_files $uri %uri/ /index.html
}