使用AppRoutes时React应用无法在浏览器渲染求助

我第一次搭建React应用，但浏览器中完全没有内容渲染，代码库如下：

App.js #

import React, { Component } from 'react';
import { Route, Routes } from 'react-router-dom';
import AppRoutes from './AppRoutes.js';
import { Layout } from './components/Layout.js';
import './index.css';

export default class App extends Component {
  static displayName = App.name;

  render() {
    return(
        <Layout>
          <Routes>
            {AppRoutes.map((route, index) => {
              const { element, ...rest} = route;
              return <Route key={index} {...rest} element={element} />
            })}
          </Routes>
        </Layout>
    );
  }
}

index.js #

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';
import reportWebVitals from './reportWebVitals.js';
import 'bootstrap/dist/css/bootstrap.css';

const baseUrl = document.getElementsByTagName('base')[0]?.getAttribute('href') || '/';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>
);

reportWebVitals();

AppRoutes.js #

import { Index } from './pages/Home/Index.js';
import { About } from './pages/Home/About.js';
import { Menu } from './pages/Menu/Menu.js';
import { Contact } from './pages/Home/Contact.js';

const AppRoutes = [
    {
        index: true,
        element: <Index />
    },
    {
        path: '/home/about',
        element: <About />,
    },
    {
        path: '/menu',
        element: <Menu />
    },
    {
        path: '/contact',
        element: <Contact />
    },
];

export default AppRoutes;

Layout.js #

import React, { Component } from "react";
import { Container } from "reactstrap";
import { Navigation } from "./Navigation.js";

export class Layout extends Component {
    static displayName = Layout.name;

    render() {
        return (
            <div>
                <Navigation />
                <Container>
                    {this.props.children}
                </Container>
            </div>
        );
    }
}

Navigation.js #

import React, { Component} from "react";
import { Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from "reactstrap";
import { Link } from "react-router-dom";
import './Navigation.css';

export class Navigation extends Component {
    static displayName = Navigation.name;

    constructor(props) {
        super(props);

        this.toggleNavBar = this.toggleNavBar.bind(this);
        this.state = {
            collapsed: true
        };
    }

    toggleNavBar() {
        this.setState({collapsed: !this.state.collapsed});
    }

    render() { 
        return(
            <header>
                <Navbar className="navbar-expand-sm navbar-toggleable-sm navbar-dark ng-white mb-3" container light>
                    <NavbarBrand className="ms-4 ms-lg-0" tag={Link} to="/">
                        <h1 className="text-primary m-0">FOODY</h1>
                    </NavbarBrand>
                    <NavbarToggler onClick={this.toggleNavBar} className="mr-2"/>
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
                        <ul className="navbar-nav flex-grow mx-auto p-4 p-lg-0">
                            <NavItem>
                                <NavLink tag={Link} to="/">Home</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} to="/menu">Menu</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} to="/contact">Contact Us</NavLink>
                            </NavItem>
                        </ul>
                    </Collapse>
                </Navbar>
            </header>
        );
    }
}

排查及修复步骤 #

1. 确认根DOM元素存在 #

检查public/index.html中是否包含id为root的元素：

<div id="root"></div>

如果缺少，添加该元素，React需要挂载到这个节点上。

2. 修复路由index配置问题 #

react-router-dom v6中，index: true的路由需要嵌套在路径为/的父路由下，否则可能无法匹配。直接将首页路由改为path="/"更稳妥：
修改AppRoutes.js：

const AppRoutes = [
    {
        path: '/', // 替换原来的index: true
        element: <Index />
    },
    // 其他路由保持不变
];

3. 修复Navbar样式冲突 #

Navigation.js中Navbar同时设置了navbar-dark和light属性，导致文字颜色与背景色冲突，内容被隐藏：

// 原代码
<Navbar className="navbar-expand-sm navbar-toggleable-sm navbar-dark ng-white mb-3" container light>

// 修改后
<Navbar className="navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark mb-3" container>

去掉light属性，添加bg-dark确保深色背景，让白色文字正常显示。

4. 检查页面组件导出方式 #

确保Index.js、About.js等页面组件的导出与导入一致：
如果页面组件是默认导出：

// pages/Home/Index.js
export default function Index() {
    return <div>首页内容</div>;
}

则需要修改AppRoutes.js的导入语句：

import Index from './pages/Home/Index.js'; // 去掉花括号

如果是命名导出，确保组件内用export const Index = ...，导入时保持{ Index }格式。

5. 验证依赖安装完整性 #

执行以下命令确保所有依赖都已正确安装：

npm install react react-dom react-router-dom reactstrap bootstrap

6. 检查控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有报错信息，比如组件导入路径错误、语法错误等，根据提示修复问题。

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