React.js应用路由失效：localhost:3000显示空白页且无报错

问题根源 #

你的代码有两个核心问题导致页面空白：

1. react-router-dom v6+ 必须用Routes包裹所有Route：v6版本开始，所有路由规则必须嵌套在Routes组件内，否则Route不会被正确解析。
2. Route写法错误：v6不再支持把组件作为Route的子元素，必须通过element属性传递要渲染的组件。
3. 多余导入了未使用的Router，可以直接删除。

修改后的完整代码 #

import './App.css';
import React from 'react';
// 移除没用的Router导入，添加Routes
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Card from './components/Card/Card';
import CardData from './components/Card/CardData';
import Footer from './components/Footer/Footer';
import Navbar from './components/Navbar/Navbar';
import Home from './components/Pages/Home/Home';
import Contact from './components/Pages/Contact/Contact';
import Products from './components/Pages/Products/Products';
import About from './components/Pages/About/About';

const cards = CardData.map(item => (
    <Card
        key={item.id}
        item={item}
    />
))

function App() {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                {/* 用Routes包裹所有Route */}
                <Routes>
                    {/* 用element属性传递组件 */}
                    <Route path='/' element={<Home />} />
                    <Route path='/products' element={<Products />} />
                    <Route path='/contact' element={<Contact />} />
                    <Route path='/about' element={<About />} />
                </Routes>
                <section className="cards-list">
                   {cards}
                </section>
                <Footer />
            </BrowserRouter>
        </div>
    );
}

export default App;

额外注意事项 #

• 如果你的Navbar里用的是普通<a>标签跳转，改成react-router-dom提供的<Link>组件，否则会触发页面刷新，无法实现单页导航：

  // Navbar组件里导入Link
  import { Link } from 'react-router-dom';
  
  // 替换a标签
  <Link to="/">首页</Link>
  <Link to="/products">产品</Link>
  

• 如果你希望cards和Footer只在首页显示，把它们移到Home组件里，否则它们会在所有路由页面都显示。

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