react-router-dom的Route与Router完全不生效，报路由无element错误如何解决

你当前使用的是react-router-dom v6版本，该版本对路由API做了破坏性更新，沿用v5版本的写法会触发对应报错。

需要修改的index.js内容如下：

• Route组件移除了component属性，替换为element属性，属性值需要传入对应组件的JSX实例，而非组件本身
• v6版本默认开启路由精确匹配，不需要额外添加exact属性
• 删除Routes组件外冗余的<App />标签，避免所有页面重复渲染App组件

修正后的完整index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import Register from "./components/Register";

ReactDOM.render( 
  <Router>
    <React.StrictMode>
      <Routes>
        <Route path="/register" element={<Register />} />
        <Route path="/" element={<App />} />
      </Routes>
    </React.StrictMode>
  </Router>,
  document.getElementById('root')
);

reportWebVitals();

其余代码不需要调整，修改完成后重启项目即可正常访问/和/register路由。

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