如何使用Express和React作为UI构建器在后端处理路由

Question

I started to learn ReactJS for using in front-end of my website. I want to build a multiple page website, However I ran into a problem and I don't have any idea how this should be implemented.

When I used Express and pure html and css the way was straightforward and I could handle routes perfectly. to make it clear consider following code :

const express = require('express');
const app = express();
app.get('/home', (req, res)=>{
    //more stuff...
    res.send('home.html');
})

However in react mixed up with Express as back-end, I don't have any idea for handling the routes. I followed some tutorial but almost all of them use react-router as a means of handling the routes. I know this can be done using react-router , but I'm looking for a way to handle them just like snippet above and something like below:

//initializations
app.get('/home', (req, res)=>{ 
    res.send(<Home and props/>)
})
app.get('/dashboard, (req, res)=>{
    res.send(<Dashboard info=`${req.userInfo} />`)
})

I'm more comfortable in this way than handling with react-router , since as I said, I'm going to create a multiple page website with server-side-rendering .

How Can I implement this approach ? Thanks in advance.

Answer 1

If you're using React, I'd encourage you to consider a single page app instead. It's what React was built for and single page apps are super dope.

If you really want to have a separate page for each of your React components, each page will need to be its own html document and you can use renderToString to turn the component into a string that can be inserted into the html.

Here's a good article on how to do this thing I hope you don't do :-) https://medium.com/front-end-hacking/server-side-rendering-with-react-and-express-382591bfc77c