使用react-router-dom Router功能出错，求助CRUD应用路由问题

你的App.js代码使用了React Router v5的路由写法，但当前项目依赖的是React Router v6版本，v6对Route组件的用法做了变更，导致控制台报错。

错误原因 #

React Router v6不再支持将组件作为Route的子元素嵌套，必须通过element属性指定要渲染的组件。

修改后的代码 #

import './App.css';

import AddUser from "./components/AddUser";
import Navbar from "./components/navbar";
import CrudApp from "./components/CrudApp";
import AllUsers from "./components/AllUsers";
import { Routes, Route } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";


function App() {
  return (
    <div>
      <Router>
        <Navbar />
        <Routes>
          <Route path='/add' element={<AddUser />} />
          <Route path='/all' element={<AllUsers />} />
          <Route path='/' element={<CrudApp />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

关键修改点 #

• 把每个Route标签内的组件，改为element={<组件名 />}的形式传递
• 保留Router和Routes的外层包裹，这部分在v6中的用法是正确的

修改后即可解决路由匹配失败的问题，正常渲染对应页面组件。

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