React 18项目react-router-dom v6所有路由不生效问题求助

核心原因是v6版本API和旧v5版本不兼容，代码写法不符合v6规范，同时存在会直接阻断运行的低级错误，具体修正点如下：

• Route组件渲染属性用错：v6版本不再支持component属性接收组件，必须使用element属性传入JSX元素，当前写的component={<Xxx />}不会被路由识别，所有匹配逻辑都会失效。
• 根路径配置错误：首页路由的path不能写空字符串，必须显式写为/。
• 组件导入和使用不匹配：App.js里导入Shop组件时写的是import Half from './Shop'，但路由里渲染的是<Shop />，运行时会直接抛出Shop is not defined的报错，阻断页面渲染。
• 小问题（不影响路由生效，但建议修正）：NotFound组件里的div类名写的是404，CSS类名不允许以数字开头，部分浏览器下样式会失效，建议改成not-found、page-404这类合法命名。
• 可选优化：React 18已经废弃了ReactDOM.render的渲染API，虽然当前版本做了兼容，建议改成官方推荐的createRoot写法，避免后续版本升级出问题。

修正后可直接运行的代码 #

App.js #

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

import Top from './Top';
import Main from './Main';
import Shop from './Shop';
import NotFound from './NotFound';

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Top />
                <Routes>
                    <Route path="/" element={<Main />} />
                    <Route path="/shop" element={<Shop />} />
                    <Route path="*" element={<NotFound />} />
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

index.js（React18标准写法） #

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

改完之后刷新页面，路由就可以正常匹配：访问/显示Main组件，访问/shop显示Shop组件，其他不存在的路径显示NotFound页面。

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