React.js路由异常：无论URL如何始终渲染主App组件求助

你的问题核心是React Router版本不兼容导致路由匹配失效：你使用了React Router v6的element属性写法，但同时混用了v5的Switch组件——v6已废弃Switch，改用Routes作为路由容器，这种混用会导致路由规则无法正确匹配，所有请求都会 fallback 到根路径的MyApp组件。

修复步骤 #

1. 替换Switch为Routes组件：v6中必须用Routes包裹Route，它会按顺序匹配路由并渲染第一个匹配的组件。
2. 清理无用导入：删除代码中未使用的Switch和Link导入。
3. 保持路由规则顺序：将更具体的路由（如/drivers）放在前面，根路由放在最后。

修改后的index.jsx代码 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyApp from './_app.jsx';
import Drivers from './drivers.jsx'
import React, { Component } from 'react'

class Home extends Component {
    render() {
        return (
            <Router>
                <Routes>
                    <Route path='/drivers' element={<Drivers />} />
                    <Route path='/' element={<MyApp />} />                
                </Routes>
            </Router>
        );
    }
}

export default Home;

额外检查点 #

• 确认react-router-dom版本为v6：可在package.json中查看，若版本低于6，要么升级到v6，要么改用v5写法（v5中用component或render属性替代element）。
• 确保项目根渲染逻辑正确，比如在入口文件（如src/index.js）中正确渲染Home组件：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import Home from './index.jsx';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Home />);
  

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