在这里,我正在实现一个简单的路由程序来在 react js 中的页面之间进行路由。我在运行时遇到意外行为。
这是我的App.js代码
import LoginPage from './LoginPage'
import React from 'react';
import Home from './Home'
import About from './About'
import ContactUs from './ContactUs'
import './App.css';
import {BrowserRouter,Switch,Route,Link } from 'react-router-dom'
class App extends Component {
render() {
return (
<div className="App">
<BrowserRouter>
<div>
<ul>
<li> <Link to="/Home">Home</Link> </li>
<li> <Link to="/About">About</Link> </li>
<li> <Link to="/ContactUs">ContactUs</Link> </li>
</ul>
{/**/} <Switch>
<Route path="/Home"></Route>
<Home/>
<Route path="/About"></Route>
<About/>
<Route path="/ContactUs"></Route>
<ContactUs/>
</Switch>
</div>
</BrowserRouter>
{/*<LoginPage/>*/}
</div>
);
}
}
export default App;
当我首先运行代码时 Home.js 页面应该可见。它来了没有任何问题 主页
这里的问题是当我再次单击主页按钮时,它仅显示一个带有路由开关的空白页面。这是单击主页时的输出图片
Home.js代码
import React, {Component} from 'react';
class Home extends Component {
render() {
return (
<div className="Home_pg">
<h1>Home Page</h1>
<p>Home page content</p>
</div>
);
}
}
export default Home;
- 我面临的主要问题是当我单击主页中的 ContactUs 或 About 时,它没有显示相应页面上的内容。
- 它为主页显示相同的内容。
- 单击关于或联系我们时的图像 单击关于或联系我们时的图像
- 这是ContactUs.js和About.JS的代码
import React, {Component} from 'react';
class About extends Component {
render() {
return (
<div >
<h1>About Page</h1>
<p> About content</p>
</div>
);
}
}
export default About;
import React, {Component} from 'react';
- **ContactUs.js**
class ContactUs extends Component {
render() {
return (
<div >
<h1>Contact Page</h1>
<p> Contact content</p>
</div>
);
}
}
export default ContactUs;
在这里,我不清楚为什么会这样。我的班级组件有什么问题吗?有关此的任何建议或解决方案都对我有帮助。