React路由组件无法显示求助：Navbar正常但页面组件无输出

核心原因 #

你使用的是react-router-dom v6，但写法沿用了v5的旧语法，v6中<Route>组件的规则已变更：

• exact 属性被移除，<Routes>组件默认会精准匹配路径
• 组件需通过element属性传入，且必须写成JSX形式（如<Home />，而非component={Home}）

修改后的App.js代码 #

import React from "react";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

function App() {
    return(
        <Router>
            <Layout>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/blog' element={<Blog />} />
                    <Route path='/blog/:id' element={<BlogDetail />} />
                    <Route path='/category/:id' element={<Category />} />
                </Routes>
            </Layout>
        </Router>
    );
};

export default App;

额外修正细节 #

你的Home组件中使用了原生HTML的class属性，React中需替换为className：

import React from "react";

function Home(){
    return(
        <div className="card mb-3">
            <div className="row g-0">
                <div className="col-md-4">
                </div>
                <div className="col-md-8">
                    <div className="card-body">
                        <h5 className="card-title">Card title</h5>
                        <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;

验证说明 #

修改后，路由组件会正常渲染：Navbar通过Layout保持全局显示，对应路径的组件会加载到{props.children}位置，完全符合你的预期。

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