flowbite-react路由配置求助：跳转/expenses后页面无内容

核心问题原因 #

flowbite-react的Navbar组件默认使用原生<a>标签作为导航链接载体，直接设置href会触发页面硬刷新，破坏react-router-dom的单页路由机制，导致刷新后路由匹配异常或页面无法渲染。

解决方案步骤 #

1. 替换导航链接为react-router-dom的<Link>组件 #

在App.jsx中导入react-router-dom的Link组件，然后在Navbar的导航项中通过as属性指定使用Link，将href替换为to属性定义路由路径：

// App.jsx
import { Navbar } from 'flowbite-react';
import { Link, Outlet } from 'react-router-dom';

function App() {
  return (
    <>
      <Navbar fluid rounded>
        <Navbar.Brand as={Link} to="/">
          <span className="self-center text-xl font-semibold whitespace-nowrap">My App</span>
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Navbar.Item as={Link} to="/expenses">
            Expenses
          </Navbar.Item>
          <Navbar.Item as={Link} to="/invoices">
            Invoices
          </Navbar.Item>
        </Navbar.Collapse>
      </Navbar>
      {/* 渲染子路由内容，必须添加Outlet才能显示嵌套路由的组件 */}
      <Outlet />
    </>
  );
}

export default App;

2. 确认main.jsx的路由配置正确性 #

确保BrowserRouter包裹整个应用，且子路由正确嵌套在根路由下：

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import Expenses from './components/Expenses';
import Invoices from './components/Invoices';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          {/* 子路由无需添加根路径前缀，直接写对应路由名 */}
          <Route path="expenses" element={<Expenses />} />
          <Route path="invoices" element={<Invoices />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
);

3. 排查其他潜在问题 #

• 检查子路由组件（如Expenses、Invoices）是否正确通过export default导出，无语法错误
• 打开浏览器控制台，查看是否存在路由匹配失败、组件渲染报错等信息
• 禁止在App组件内重复包裹BrowserRouter，否则会导致路由上下文冲突

验证效果 #

修改后点击Navbar的导航链接，页面会通过react-router-dom实现单页跳转，不会触发硬刷新；刷新页面后，路由会正确匹配并渲染对应组件内容。

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