React Router路由切换时Register组件无法渲染问题求助

问题描述 #

使用react-router-dom开发React应用时，访问http://localhost:3001/register，页面未显示Register组件，反而展示默认的"Edit src/App.js and save to reload"页面。已验证路径无误、组件导入正确，浏览器控制台和网络面板无报错。

核心原因 #

项目依赖的是react-router-dom v6，但代码中使用了v5版本的API：

• v6中已移除Switch组件，替换为Routes
• v6中Route组件不再支持component属性，需改用element属性并传入JSX元素

解决方案 #

修改App.js代码，适配v6的路由API：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Register from './components/Register';
import Login from './components/Login';
import Companies from './components/Companies';
import './App.css';

function App() {
    return (
        <Router>
            <div className="App">
                <header className="App-header">
                    <h1>Welcome to Medicinska Oprema App</h1>
                    <p>Your React application is running!</p>
                </header>
                <Routes>
                    <Route path="/register" element={<Register />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/companies" element={<Companies />} />
                    {/* 可选：添加根路由的处理，比如重定向到登录页 */}
                    {/* <Route path="/" element={<Navigate to="/login" />} /> */}
                </Routes>
            </div>
        </Router>
    );
}

export default App;

验证步骤 #

1. 保存修改后的App.js
2. 重启React开发服务器（若自动热更新未生效）
3. 再次访问http://localhost:3001/register，即可看到Register组件正常渲染

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