使用react-router-dom后React应用出现空白页面问题求助

下面是针对你遇到的空白页面问题的具体排查和修复方案：

核心错误点 #

1. 组件命名不符合React规范
   Home组件的函数名用了小写的home，React要求组件必须以大写字母开头，小写开头的函数会被识别为普通HTML标签，根本不会当作组件渲染，这是导致空白的关键原因。

2. 组件文件名与导入路径不匹配
   你的导航组件文件叫Nav.js，但App.js里导入的是Navigation，这会导致找不到组件，进而引发渲染错误。必须把文件名改成Navigation.js，和导入的名称对应上。

修复后的代码示例 #

Home.js #

import React from "react";
import logo from '../logo.svg';
import './Home.css';
import "@fontsource/dm-sans";

// 组件名改为大写开头的Home
function Home() {
  return (
    <div className="Home">
      <header className="Home-header">
        <h1>EPC RATING PREDICTOR</h1> 
      </header>
      <button> GET STARTED</button>
    </div>
  );
}

export default Home;

Navigation.js（原Nav.js） #

先把文件名改成Navigation.js，代码保持不变：

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/glazing">Glazing</NavLink>
    </div>
  );
}

export default Navigation;

额外需要检查的地方 #

• 确认Glazing组件已经在src/components/Glazing.js里正确创建并导出，不然访问/glazing路径时同样会空白。
• 如果你用的是react-router-dom v6版本，语法和v5不一样，需要把Switch换成Routes，Route的component属性改成element，调整后的App.js代码如下：

import React, { Component } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Glazing from './components/Glazing';
import Navigation from './components/Navigation';

class App extends Component {
  render() {
    return(      
      <BrowserRouter>
        <div>
          <Navigation />
          <Routes>
            <Route path="/" element={<Home />} exact/>
            <Route path="/glazing" element={<Glazing />}/>
          </Routes>
        </div> 
      </BrowserRouter>
    );
  }
}

export default App;

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