Javascript react.js根块的不同内容

我正在开发一个动态页面， 主模板在PHP上呈现， react有一个根块，其中有一定的逻辑； 问题是如何在一个文件中包含两个不同的react应用程序， 根据来自外部的一些参数， 例如，一个页面是“品牌”，另一个页面是“评论”， 您还需要从外部提供参数，例如id

在根文件index.js中会出现一个想法，解析url并解决这个问题 通过if-else语句。但有些东西告诉我，这是一个糟糕的编程基调

我正在做后端，所以我不知道正确的解决方案。有什么想法吗

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

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

从“React”导入React；
从“react dom”导入react dom；
从“/components/Brands.js”导入品牌；
render（，document.getElementById（“根”））；

如果我理解正确，您希望拥有基于PHP的主页，它是由服务器端的某个框架（如lavarel）生成的。PHP页面将包含

或出现React应用程序的类似块。您需要根据PHP后端已知的一些参数值告诉React应用程序要呈现什么

如果是，则有以下选项：

HTML5“数据”属性

在PHP页面中嵌入一些带有任意

数据-

属性的标记。HTML5支持任意参数，只要它们以

data-

属性作为前缀

比如说

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

当然，可以使用任何其他要嵌入的标记来代替

标记。您可以查看以查找其他详细信息

使用QueryString，但再次使用

块

比如说

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

在React应用程序的根目录中

 var script_tag = document.getElementById('appselector')
 var choosenApp = script_tag.getAttribute("data-app");
 // choosenApp will contain required id

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'];

var script_tag=document.getElementById（'appselector'）；
var query=script_tag.src.replace（/^[^\？]+\？？/，“”）；
//将查询字符串解析为参数和参数
var vars=query.split（&）；
var args={}；
对于（var i=0；ii）如果您希望基于url加载不同的组件，那么您可以使用
react router
有什么原因不能在PHP中这样做吗？