React路由匹配错误：路径'/'无匹配，已尝试方案仍未解决

问题原因 #

你遇到的两个错误均源于使用了react-router-dom v6版本的旧写法：

1. 第一个错误No routes matched location "/"：根路径/未配置对应路由，访问时无匹配项。
2. 第二个错误Matched leaf route at location "/" does not have an element：v6版本中Route组件不再支持component属性，也无需exact（v6默认路由为精确匹配），必须使用element属性传入组件。

修复后的完整代码 #

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import './style.css'
import LandingPage from './views/landing-page'
import Page from './views/page'

const App = () => {
  return (
    <Router>
      <Routes>
        {/* 根路径匹配LandingPage组件 */}
        <Route path="/" element={<LandingPage />} />
        {/* /page路径匹配Page组件 */}
        <Route path="/page" element={<Page />} />
        {/* 保留原/landing-page路由（按需选择） */}
        <Route path="/landing-page" element={<LandingPage />} />
      </Routes>
    </Router>
  )
}

// 若使用React 18+，推荐改用createRoot（可选升级）
// import { createRoot } from 'react-dom/client';
// const root = createRoot(document.getElementById('app'));
// root.render(<App />);

ReactDOM.render(<App />, document.getElementById('app'))

关键修改点 #

• 移除Route组件的exact属性：v6默认采用精确匹配规则，无需手动声明。
• 将component={组件名}替换为element={<组件名 />}：这是v6版本Route组件的标准写法，必须传入JSX元素而非组件引用。
• 新增根路径/的路由配置，解决访问根路径时的匹配错误。

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