页面之间的 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 Page

• 这里的问题是，当我再次单击 Home 按钮时，它只显示一个带有路由开关的空白页面。这是输出的图片when clicking on home

• 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 时，它没有显示相应页面上的内容。
• 它与主页显示相同的内容。
• 点击关于或联系我们时的图像Image when clicking About or Contact US
• 这是 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;