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。精确匹配只会与/路由匹配，后面没有任何内容，而您正在/right路由上测试，该路由不匹配。

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

React组件不显示内容

1 个答案: