使用React Router配置路由时遇模块找不到错误，求助路径问题

问题根源 #

1. 相对路径错误：about.js位于src/pages目录，你用./src/components/...的写法，会让程序从src/pages/src/components/去查找文件，显然不存在这个路径。
2. React Router v6语法错误：Route组件的exact={<About />}写法完全错误，v6版本中需用element属性指定渲染的组件，且exact属性已被废弃（默认就是精确匹配）。
3. React元素属性错误：JSX中不能用原生HTML的class属性，需替换为className。

修正后的代码 #

about.js #

// 从pages目录回到上一级（src），再访问components文件夹
import { Navbar } from '../components/navigation-components/Navbar.js'
import { Typewriting } from '../components/about-components/Typewriter.js';
import { Description } from '../components/about-components/Description.js';
import { Logo } from '../components/about-components/Logo.js';

const About = () => {
  return (
    <div className='container'>
        <header>
            <Navbar/>
        </header>
        <div className="break"></div>
        <Typewriting/>
        <div className="break"></div>
        <Logo/>
        <Description/> 
    </div>
  );
}; 

export default About;

App.js #

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import React from 'react';
import About from './pages/about.js';

function App() {
    return (
        <Router>
            <Routes>
                 {/* 用element属性指定要渲染的组件 */}
                 <Route path='/' element={<About />} />
            </Routes>
        </Router>
    );
 }

 export default App;

关键注意事项 #

• 相对路径规则：./表示当前目录，../表示上一级目录，多级目录需依次往上回溯
• React Router v6核心变化：路由配置统一用Routes包裹Route，组件通过element传入
• JSX语法规范：所有HTML类名必须用className替代class，避免与JavaScript关键字冲突

内容的提问来源于stack exchange，提问作者Randolf Gabrielle Uy