0

I have one react application created using create-react-app command.

For example I have the following routing in my react application.

/Home
/About
/Profile/:id

Each routing is working perfectly in create-react-app.

In my node application I have written all api for this application and are available using at myServer/api/v1/. On other route I'm simply returning build/index.html which is my build for react application.

Here is server.js code snippet 

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

/* route path : 'api/v1/' */
app.use(require('./server/v1/routes')); 

app.get('/*', function (req, res) {
    return res.sendFile(path.join(__dirname, '/build/index.html'));
});

This is my server/v1/routes/index.js file

 var express = require('express');
 var router = express.Router();

 router.use('/api/v1/', require('./../api'));

 module.exports = router;

This is my api/index.js file

var express = require('express');
var router = express.Router();
var path = require('path');

import generalRouter from './controllers/general/router';
import profileRouter from './controllers/prifile/router';

//Login, forget password, reset password
router.use('/', generalRouter); 
router.use('/profile', profileRouter);

module.exports = router;

each router file contains relative get/post/put/delete method for my application.

React routing : 

 <BrowserRouter>
          <Switch>
            <Route exact={true} path='/' component={Home}/>
            <Route path='/About' component={About}/>
            <Route path='/ContactUs' component={ContactUs}/>
            ....
            <Route path='/Profile/:id?' component={Profile}/>
            <Route path='/VerifyAccount/:verifyLink?' component={VerifyAccount}/>
          </Switch>
        </BrowserRouter>

All my routing are working perfectly except routes with parameters in above example Profile/:id and is not working. Same for all other routes (/VerifyAccount/:verifyLink?) that are using parameters in react routing in my application. Its working in create-react-app but not with my node server. Even if I comment out my api routes.

junednimble
  • 1
  • 2
  • 1
    Could you share your ./server/v1/routes.js? – Sami Hult Sep 17 '18 at 04:18
  • @SamiHult please see update – junednimble Sep 17 '18 at 04:40
  • I have also tried commenting out api routings and just using react build's index.html but no luck. – junednimble Sep 17 '18 at 04:46
  • Can you share your react-router code – sultan aslam Sep 17 '18 at 04:54
  • I guess its a typo while posting the question but please re-check for the router name your are providing to `/profile`(in the question, you are importing `profileRouter` but providing `locumRouter`) and can you also please add the file for profile router.? – Raghav Garg Sep 17 '18 at 05:14
  • @RaghavGarg yes it was typo in my question. Profile router contains get method with for getting profile info. But it shouldn't be conflict with react as api are called from api/v1/profile. – junednimble Sep 17 '18 at 05:40
  • are you getting any errors(please share), if not then what page are you seeing? Please explain `Profile/:id route is not working` behavior in detail What is it showing when you trigger this route? Please try adding a route in the end like ``, it may give you some insight about the actual problem. – Raghav Garg Sep 17 '18 at 07:11
  • Its showing blank page. One more thing when i add extra '/' behind each route its not working in node server but works in `react-create-app` 's `react-scripts start` but not with node @RaghavGarg – junednimble Sep 17 '18 at 08:02
  • Its not going in 404 but when Im using path like Path1/ or Path1/Path2 its not working with react and node – junednimble Sep 17 '18 at 08:25

0 Answers0