如何从express.js发送数据以在没有API的情况下做出反应？

Question

I want to create a Multi Page APP using react and express.

I am confused about how to retrieve data sent by the express into react without using the API.

I wonder if react can retrieve the data stored in html props sent by express? maybe this question is a little weird. actually I have never created a website with just an express. I always use react and retrieve data through the API and create a Single Page App.

is there any way to do this?

Answer 1

React and express are playing two different roles. React Is your front end. Express is the backend. Those are logically separated layers. The preferred way to load data from backend to frontend is through API calls.

Answer 2

I wonder if react can retrieve the data stored in html props sent by express?

Yes it can. I'm not sure what you mean by "html props", but you can store the needed data as data-attributes when sending back the html to the front-end, and then pull it out of the DOM like so ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ).

Depending on how you plan to use it, you can just pull that data out for one-time usage or push it into your state.

Answer 3

The first way I could think it is to use the parameters in url.

For example, if your website has url like http://localhost/ and you will use url http://localhost/api/data? to receive data from express.js.

Then in your express.js , after getting request from your react, you can use:

res.redirect( http://localhost/api/${encodeURIComponent(JSON.stringify(data))})

where res is the response object and data is the data you want to send to data, which is assumed to be an object.

In your react , you can retrieve your data with the following steps: - implement a component and set /api/data? as the route of this component; - in the component, retrieve the data as JSON.parse(decodeURIComponent(this.props.match.params.data))