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

Posted 2023-02-22

【中文标题】页面之间的 React Js 路由中的意外行为

【英文标题】：Unexpected behaviour in React Js Routing between Pages

【发布时间】：2021-04-04 03:47:21

【问题描述】：

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

这里我不清楚为什么会这样。我的类组件有什么问题吗？任何有关此的建议或解决方案对我来说都会有帮助。

【问题讨论】：

确保你已经为Route使用了exact prop。

试试这些行

【参考方案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;

【讨论】：

loading..

^ 我在切换和路由时遇到错误。

如果我删除这个标签，代码运行良好。 loading..

感谢您的帮助。

@VISHNUPRASAD 那是因为我忘了导入这个。另外，我忘了提到延迟加载。请参阅上面的编辑答案。