React Js页面间路由中的意外行为

Question

这里我实现了一个简单的路由程序，用于在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.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;

我不清楚为什么会发生这种事。我的类组件有问题吗？。任何关于这方面的建议或解决方案都将对我非常有帮助。

Answer 1

You have to put each component inside its relevant Route tag.
In addition I suggest to add two things:
- lazy loading for components.
- a Suspense tag with some loading indication (text or spinner).
import LoginPage from './LoginPage'
import React, { lazy, Suspense } from 'react';
import './App.css';
import {BrowserRouter,Switch,Route,Link } from 'react-router-dom';
const Home= lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const ContactUs = lazy(() => import('./ContactUs'));

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>
<Suspense fallback={<div>loading..</div>}
<Switch> 
<Route  path="/Home"><Home/></Route>
<Route path="/About"><About/></Route>
<Route path="/ContactUs"><ContactUs/></Route>
</Switch>
</Suspense>
</div>
</BrowserRouter>
</div>
);
}
}
export default App;