Different contents of the root block of react.js

Question

I am developing a dynamic page, the main template is rendered on PHP, there is a root block for react in which there is a certain logic; The question is how to have two different react-applications in one file, depending on some parameter coming from the outside, for example, one page will be "brands" and for the other "reviews", you also need to give parameters from the outside, for example id

a thought comes to mind in the root file index.js and parse url and resolve this case by if-else statements. but something tells me that this is a bad programming tone

I’m doing backend, so I don’t know the right solution for the react. any ideas?

import React from "react";
import ReactDOM from "react-dom";
import Brands from "./components/Brands.js";

ReactDOM.render(<Brands />, document.getElementById("root"));

If you want to load different components based on url then you can use `react-router` — Prakash Sharma, May 19 '19 at 08:50

score 1 · Accepted Answer · answered May 19 '19 at 11:25

If I understand correctly you want to have main page based on PHP, which is generated by some framework (like lavarel) on server-side. PHP page will contain <div id="react-root"/> or similar block where React app will appear. You need to tell React app what to render depending on some parameter value which is known by PHP backend.

If so, there are following options:

HTML5 'data' Attribute

Embed some tag to PHP page with arbitrary data- attribute. HTML5 supports arbitrary parameters as long as they prefixed with data- attribute.

For example
```
 <script id="appselector" data-app="runApp1" src="http://yoursite.io/app.js" >
```
And in root file pf React app do
```
 var script_tag = document.getElementById('appselector')
 var choosenApp = script_tag.getAttribute("data-app");
 // choosenApp will contain required id
```
Sure, in place of <script/> tag can be any other tag that you want to embed. You may look at this post to find additional details.

Use the QueryString but again with your <script/> block.

For example

<script id="appselector" src="http://yoursite.io/app.js?app=runApp1">

And in the root of your React app do

var script_tag = document.getElementById('appselector');
var query = script_tag.src.replace(/^[^\?]+\??/,''); 
// Parse the querystring into arguments and parameters
var vars = query.split("&");
var args = {};
for (var i=0; i<vars.length; i++) {
    var pair = vars[i].split("=");
    // decodeURI doesn't expand "+" to a space.
    args[pair[0]] = decodeURI(pair[1]).replace(/\+/g, ' ');   
}
var choosenApp = args['app'];

(Options 1 and 2 are taken from here)

As suggested by @Prakash Sharma, you may use React-router. The main difference from options 1 and 2 is that react-router allows end user to choose what app to run. It mostly used to make React app multi paged. For example, first page will be on address http://reactapp.com/app1 and another will be on address http://reactapp.com/app2 and so on. Besides that addresses are changed all them should point to single PHP page on your backend. React-router inside React app will intercept URL and show correct page or app. No real PHP page change takes place.

This case is suitable if you want end user to select one app by him/herself. Also react app may change addresses in code.

Different contents of the root block of react.js

1 Answers1