React 组件不显示内容

Question

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

这是我的代码：

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>
        );
    }
}

导出默认 HomeBanner；

App.jsx

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

import HomeBanner from '../elements/HomeBanner';
import Analytics from '../elements/Analytics';
import FeedbackHome from '../elements/FeedbackHome';

class App extends Component {
    render() {
        return (
            <div className = 'index-page'>
                <HomeBanner />
             </div>
        );
    }
}

export default App;

Router.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, NavLink, Link, BrowserRouter as Router, Switch } from 'react-router-dom';

import NavBar from './components/NavBar';
import Footbar from './components/Footbar';

import App from './containers/App';

const routing = (
    <Router>
        <div>
            <NavBar />
            <Switch>
                <Route exact path="/" component={App} />
            </Switch>
            <Footbar />
        </div>
    </Router>
)

export default routing;

Main.js

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

import routing from './router.js'

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

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

HTML： enter image description here

反应： enter image description here

HTML: enter image description here

反应： enter image description here

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

Answer 1

从您的路由中删除 exact。 Exact 只会匹配 / 路由，后面没有任何内容，而您正在测试 /right 路由，但不匹配。

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