我正在使用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模板上找到丢失的东西。甚至我为两个模板编写了相同的代码,现在我也可以检查开发工具中缺少的元素,但这些元素不会显示在浏览器中。
答案 0 :(得分:0)
从您的路线中删除exact
。精确匹配只会与/
路由匹配,后面没有任何内容,而您正在/right
路由上测试,该路由不匹配。
<Route path="/" component={App} />