React路由报错：No routes matched location "/" 问题咨询

你的问题核心是根路径/没有对应的路由规则，同时代码里还存在React Router v6的API使用错误（已废弃component属性），以下是几种针对性的解决方式：

方式1：根路径重定向到/Rentals #

如果访问首页时需要跳转到Rentals页面，使用<Navigate>组件实现重定向：

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <main className="container">
        <Routes>
          {/* React Router v6 使用element传递组件JSX，不再用component */}
          <Route path="/Rentals" element={<Rentals />} />
          {/* 根路径重定向到Rentals页面 */}
          <Route path="/" element={<Navigate to="/Rentals" replace />} />
        </Routes>
      </main>
    </div>
  );
}

方式2：根路径直接渲染Rentals组件 #

如果你的首页就是Rentals页面，直接修改路由的path为/即可：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <main className="container">
        <Routes>
          <Route path="/" element={<Rentals />} />
        </Routes>
      </main>
    </div>
  );
}

方式3：添加404兜底路由 #

为了避免其他未定义路径也出现类似报错，可以添加一个匹配所有路径的兜底路由：

import { Routes, Route, Navigate } from 'react-router-dom';

// 自定义404组件
function NotFound() {
  return <h2>页面不存在，请检查路径</h2>;
}

function App() {
  return (
    <div className="App">
      <main className="container">
        <Routes>
          <Route path="/Rentals" element={<Rentals />} />
          <Route path="/" element={<Navigate to="/Rentals" replace />} />
          {/* 匹配所有未定义的路径 */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </div>
  );
}

关键注意点 #

React Router v6版本已经完全废弃了component属性，必须使用element来传递要渲染的组件JSX，这也是你代码里需要同步修正的地方，否则即使路径匹配正确，组件也无法正常渲染。

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