ReactJS项目路由异常求助：页面空白无法正常跳转

我仔细看了你的代码，发现几个关键问题导致路由失效、页面空白，咱们一步步来修复：

核心问题拆解 #

1. 多个Router实例冲突 #

你在Routes.js里已经用<Router>作为整个应用的路由根容器，但在HomePage.js里又嵌套了另一个<Router>。React Router 要求整个应用只能存在一个顶层Router实例，多个Router会破坏路由上下文，导致路由匹配逻辑混乱，组件无法正常渲染。

2. 根路由缺少exact属性 #

Routes.js里的根路由<Route path="/" component={HomePage}/>没有添加exact属性，这意味着所有以/开头的路径（比如/about、/loginform）都会优先匹配这个根路由，直接渲染HomePage，其他路由根本没机会生效。

3. 嵌套路由写法错误 #

HomePage里的/services、/contact子路由，应该依托外层的Router来处理，不需要自己再包裹Router，否则会导致路由上下文被隔离，子路由无法正确匹配。

分步修复方案 #

第一步：修改Routes.js #

• 给根路由添加exact属性，确保只有访问精确的/时才渲染HomePage
• 保持单一顶层Router，把HomePage里的子路由移到这里统一管理

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { LoginForm } from './components/LoginForm/LoginForm'; 
import { About } from './components/About/About'; 
import { Companies } from './components/Companies/Companies'; 
import { HomePage } from './components/HomePage/HomePage'; 
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
// 注意：如果Services/Contact是HomePage内部定义的，需要先导出并在这里导入
import { Services, Contact } from './components/HomePage/HomePage';

class Routes extends Component { 
  componentDidMount(){ 
    alert("ok"); 
  } 
  render() { 
    return ( 
      <div> 
        <Router> 
          <Switch> 
            {/* 添加exact，精确匹配根路径 */}
            <Route exact path="/" component={HomePage}/> 
            <Route path="/about" component={About}/> 
            <Route path="/loginform" component={LoginForm}/> 
            <Route path="/companies" component={Companies}/>
            {/* 新增子路由 */}
            <Route path="/services" component={Services}/>
            <Route path="/contact" component={Contact}/>
          </Switch> 
        </Router> 
      </div> 
    ); 
  } 
} 

export default Routes;

第二步：修改HomePage.js #

• 移除内部的<Router>标签，依托外层Router提供的路由上下文
• 保留导航链接和页面内容，调整子路由的渲染逻辑（如果需要导航栏全局显示，后续还可以把导航部分移到Routes.js的Switch外面）

class HomePage extends Component { 
  componentDidMount(){ 
    alert("hme"); 
  } 
  render() { 
    return ( 
      <div className="backgrnd" > 
        <h1><blink> MULTIHAND ONLINE IT WORLD</blink></h1> 
        <h3 className="outside"><marquee>It's First Time In India.. New Evolution Rising Up.. Your Complete Business,Carrier & Developing Partner..</marquee></h3> 
        
        {/* 移除嵌套的Router */}
        <div className="banner"> 
          <div> 
            <ul> 
              <li><Link className="a" to='/'>Home</Link></li> 
              <li><Link className="a" to='/about'>About</Link></li> 
              <li><Link className="a" to='/loginform'>Login</Link></li> 
              <li><Link className="a" to='/companies'>Companies</Link></li> 
              <li><Link className="a" to='/services'>Services</Link></li> 
              <li><Link className="a" to='/contact'>Contact</Link></li> 
            </ul> 
          </div> 
          <hr/> 
        </div> 

        {/* 根路径下显示的Home内容 */}
        <div className="wrapper"> 
          <div className="row"> 
            <div className="ann"><div className="blink"><span>ANNOUNCEMENTS<br></br></span></div>*New launching of IT company Martl park Solutions in Technopark Thejswani Building 2nd Floor @12.00pm on 12th May 2018</div> 
            <div className="ann1"><div className="blink"><span>VACCANCIES </span></div>*No new Openings</div> 
            <div className="ann2"><h3 className="blink1"><span>Today's Highest Profit Closing Company </span></h3><b>*Tata Elxsi</b>(Nearer to 2crs.)</div> 
            <div className="ann3"><div className="blink"><span>EMERGING TECHNOLOGIES </span></div><div>*java</div><div>*JavaScript</div><div>*C##</div><div>*Python</div><div>*C++</div><div>*C</div></div> 
          </div> 
        </div> 
      </div> 
    ); 
  } 
} 

export const Services = () => ( 
  <div> 
    <h2>Services</h2> 
  </div> 
); 

export const Contact = () => ( 
  <div> 
    <h2>Contact Us</h2> 
    <h3 className="inside">MULTIHAND ONLINE IT WORLD</h3> 
    <h4>Tech Arcade Building </h4> 
    <h4>Inside Technopark</h4> 
    <h4>Kazhakuttam P.O</h4> 
    <h4> Thiruvanathapuram </h4> 
    <hr/> 
    <h4 className="con"> 📱- +91-9854631278</h4> 
    <h4 className="con"> 📧- online@multihandworld.com</h4> 
  </div> 
); 

export default HomePage;

额外提示 #

• 如果你希望导航栏在所有页面都显示，可以把HomePage里的导航部分移到Routes.js的<Switch>外面，这样切换路由时导航栏不会消失。
• <blink>和<marquee>是非常老旧的HTML标签，兼容性和体验都不好，建议用CSS动画实现类似效果。

内容的提问来源于stack exchange，提问作者Alexiana