React Router路由报错：匹配的/home路由无element或Component

问题根源 #

你用的是React Router DOM v6版本，但代码还在沿用v5的旧写法：

• v6里<Route>组件不再支持component属性，必须改用element传递组件实例
• v6的<Routes>默认就是精确匹配，不需要写exact属性

你代码里的component={<Home />}是错误写法（v5里component该传组件本身而非实例，v6则完全用element替代），导致路由无法正确渲染组件，触发了错误提示。

修改后的App.js代码 #

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import React from "react";
import Home from './Screens/Home';
import Sleep from './Screens/Sleep';
import Brew from './Screens/Brew';
import Navigation from './Navigation';
import Steam from './Screens/Steam';

function App() {
  return(
    <div className="App">
      <Router>
        <Navigation/>
        <Routes>
          {/* 去掉exact，改用element属性传递组件JSX */}
          <Route path="/home" element={<Home />} />
          <Route path="/sleep" element={<Sleep />} />
          <Route path="/brew" element={<Brew />} />
          <Route path="/steam" element={<Steam />} />
          {/* 可选：添加默认路由，匹配不到路径时跳转到首页 */}
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </div>
  )
}

export default App;

额外说明 #

• Navigation.js里的<NavLink>在v6中可以正常使用，activeClassName="active"属性依然有效，无需修改
• 如果需要更灵活的激活类名控制，也可以用回调函数写法：

  <NavLink 
    to={tab.route} 
    className={({ isActive }) => 
      `nav-link bottom-nav-link ${isActive ? 'active' : ''}`
    }
  >
  

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