score:3

Accepted answer

Yes, React runs on the client and Express is a Node.js framework. There's a pretty good chance you're using Express if you're running any boilerplate.

Here's a pretty good walkthrough on more complete routing. https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d

In several of my applications my routes look something like this:

//router.js--and I'm positive this is from some react-express boilerplate
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

const react =  (req, res, next)=>{
  res.render('react', { 
    title: 'React Application',
    layout: false
  });
};

router.get('/app', react);
router.get('/app*', react);
module.exports = router;

//app.js
...
app.use('/', routes); //<--this is the exported router. 
...

If you want to be more simple it is probably something like:

   let reactRoute = (request, response, next) => {
     //render your react page however you're doing that. 
   }
   express.use('/API', yourApiFunction)
   express.use('/', reactRoute)
   express.use('/*', reactRoute) //Wildcards are REALLY important if you're routing inside react.

You can also bypass things with a proxy but that tends to get more complex than you probably want. Also--keep in mind you don't have to stick to Node on the back-end if you're not comfortable with it. React is client side, I use it with a few production .NET apps, some PHP (lordy!), and, yes, a lot of Node servers.

score:0

to solve No 'Access-Control-Allow-Origin' header is present on the requested resource. you've to use the cors middleware

go to the term yarn add cors or npm i cors

in server.js

const cors = require("cors");
const express = require("express");
const app = express();

app.use(cors());

Related Query

More Query from same tag