Javascript 反应组件不'；不显示内容

我正在使用Laravel和React JS创建一个web应用程序。我已经编写了多个JSX组件来加载页面。所有组件都正确安装，没有任何错误，但这里的问题是一些标题标记和一些表单内容没有显示在页面上，并且页面中缺少大部分文本和其他内容。甚至那个些都是在组件上渲染的，我可以使用浏览器控制台和react开发工具检查它们。但是它没有显示在页面上。我尝试了很多方法来解决这个问题，但最终以失败告终。关于解决此问题的任何帮助都将是可观的

这是我的密码：

HomeBanner.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class HomeBanner extends Component {
    render() {
        return (
            <div className="banner layer" id="home">
                <div className="container">
                    <div className="row banner-text">
                        <div className="col-lg-12 col-md-12 mt-lg-0 mt-5 banner-form" data-aos="fade-left">
                            <h5>Exclusively We are Expert in Medical Professional</h5>
                            <form action="#" className="mt-4 banner-form-input">
                                <p>What are you Looking?          
                                    <label className="container-radio first-radio">Consultant
                                        <input type="radio" name="radio" />
                                        <span className="checkmark"></span>
                                    </label>
                                    <label className="container-radio">Diagonastic Center
                                        <input type="radio" name="radio" />
                                        <span className="checkmark"></span>
                                    </label>
                                </p>
                                <div className="row">
                                    <div className="col-lg-4">
                                        <div className="location-wrapper">
                                            <div className="demo">
                                                <input type="text" className="location-input" placeholder="Location" /><input type="submit" value="" className="sub-loc" /><i className="fa fa-crosshairs"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-lg-8">
                                        <div className="search-wrapper">
                                            <div className="demo1">
                                                <input type="text" className="location-input" placeholder="Search by specialist / Name / Clinic" /><input type="submit" value="" className="sub-ser" /><i className="fa fa-search"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div className=" py-md-3 circle-icons">
                                <div className="row">
                                    <div className="col-lg-4 col-md-6">
                                        <img src="./public/images/home-1.png" />
                                        <span>Schedule A <br /> Medical Checkup</span>
                                    </div>
                                    <div className="col-lg-4 col-md-6">
                                        <img src="./public/images/home-2.png" />
                                        <span>Appointment with <br /> Best Doctor Near You</span>
                                    </div>
                                    <div className="col-lg-4 col-md-6">
                                        <img src="./public/images/home-3.png" />
                                        <span>Get Your Reports <br /> Over Email</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

为了便于参考，我附上了普通的html模板和react模板，以便帮助您了解遗漏了哪些内容

Html:

反应：

HTML:

反应：

---

如果您看到以上图片，您将在react模板上找到缺少的内容。即使我为两个模板编写了相同的代码，现在我也可以检查我的开发工具中缺少的元素，但它不会显示在浏览器中。

从您的路径中删除

exact

。Exact将只匹配

/

路径，后面没有任何内容，而您正在

/右侧

路径上进行测试，该路径不匹配

<Route path="/" component={App} />

---

从您的路线中删除

精确的

。Exact将只匹配

/

路径，后面没有任何内容，而您正在

/右侧

路径上进行测试，该路径不匹配

<Route path="/" component={App} />

哪些内容、哪些部分没有呈现？您必须提及没有清晰呈现的部分，而不是如此模糊。否则很难帮助你。你到底期望什么？HomeBanner组件中有文本，是的，但没有其他内容，您希望显示一些数据吗？是的，HomeBanner中有一些文本，但该文本未显示在浏览器中，即使我可以检查开发工具中的内容。请检查我附加的上述图像，以获得问题的详细信息。谢谢。什么内容，什么部分没有渲染？你必须提到没有渲染清楚的部分，不要这么含糊。否则很难帮助你。你到底期望什么？HomeBanner组件中有文本，是的，但没有其他内容，您希望显示一些数据吗？是的，HomeBanner中有一些文本，但该文本未显示在浏览器中，即使我可以检查开发工具中的内容。请检查我附加的上述图像，以获得问题的详细信息。非常感谢。

import React from 'react';
import ReactDOM from 'react-dom';

import routing from './router.js'

ReactDOM.render(routing, document.getElementById('root'));

<Route path="/" component={App} />