React Router路由跳转失败，报错：[header] is not a <Route>

错误原因 #

Routes组件的直接子元素只能是Route或React.Fragment，你将<header>直接嵌套在<Routes>内部，导致抛出错误：

Uncaught Error: [header] is not a

同时按钮缺少跳转逻辑，无法触发路由切换到CreateBug组件。

修复后的完整代码 #

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <div className="App">
      <Router>
        {/* 全局导航栏，放在Routes外部避免结构错误 */}
        <header className="App-header">
          <p>BUGHOUND</p>
          {/* 用Link包裹按钮实现路由跳转 */}
          <Link to="/create-bug" style={{ textDecoration: 'none' }}>
            <Button variant="contained">Create a bug</Button>
          </Link>
        </header>
        
        <Routes>
          {/* 根路径路由（首页） */}
          <Route path="/" element={
            <div className="App-header">
              <p>欢迎来到BUGHOUND</p>
            </div>
          } />
          {/* CreateBug页面路由，路径调整为短横线命名规范 */}
          <Route path="/create-bug" element={<CreateBug />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

关键修改点 #

• 修正组件结构：将<header>移出<Routes>组件，确保Routes的直接子元素只有Route，解决类型错误。
• 添加跳转逻辑：导入Link组件，通过to属性指定目标路径，包裹Button实现点击跳转，同时移除Link默认下划线样式。
• 优化路由路径：将/createBug调整为更符合前端规范的/create-bug，同时补充根路径/的路由，避免访问首页时出现空白。

替代跳转方案（使用useNavigate钩子） #

如果不想用Link组件，也可以通过useNavigate钩子实现编程式跳转：

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
import Button from '@mui/material/Button';

function App() {
  const navigate = useNavigate();

  return (
    <div className="App">
      <Router>
        <header className="App-header">
          <p>BUGHOUND</p>
          <Button 
            variant="contained" 
            onClick={() => navigate('/create-bug')}
          >
            Create a bug
          </Button>
        </header>
        
        <Routes>
          <Route path="/" element={<p>欢迎来到BUGHOUND</p>} />
          <Route path="/create-bug" element={<CreateBug />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

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