React-router 路由不是渲染组件

Question

我遇到了加载问题，我的路线标记未渲染任何组件。

我尝试过的步骤：

• 从index.js中的“react-router-dom”导入{BrowserRouter}
• 创建了 Header.js
• 从'react-router-dom'导入{路由，路由，链接}；
• 将组件 Home 的路径更改为 * 而不是 /
• 删除了“路线”标签中的所有内容（这个有效）。

下面是我在 Header.js 中的代码：

    import logo from '../../main-logo.svg';
    import './Header.scss';
    
    import { Routes, Route, Link } from 'react-router-dom';
    import Home from '../Pages/Home.js';
    import Blogs from '../Pages/Blogs.js';
    import Projects from '../Pages/Projects.js';
    import NotFound from '../Pages/NotFound.js';
    import star from '../../components/bg/star.png';
    
    const Header = () => {
    
        return (
            <header>
                <img src={logo} className="logo" alt="logo"/>
                <Routes>
                    <Route path="*" element={<Home/>} />
                    <Route path="/projects" element={<Projects/>} />
                    <Route path="/blogs" element={<Blogs/>} />
                    <Route path ="*" element={<NotFound/>} />
                </Routes>
                <div className="title-wrapper">
                    <div className="title-links">
                        <Link to={`/projects`} className="nav-link mask font-face-ps">
                            projects</Link>  
                        <Link to={`/blogs`} className="nav-link mask font-face-ps">
                            blogs</Link>
                    </div>
                </div>  
            </header>
        );
    }
    
    export default Header;

版本有：

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.1",

下面是我在index.js中的代码：

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.scss';
    import App from './components/App/App';
    import reportWebVitals from './reportWebVitals';
    import './components/fonts/PressStart/PressStart2P-Regular.ttf';
    import { BrowserRouter } from 'react-router-dom';
     
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    );
    
    reportWebVitals();

Answer 1

我相信发生错误是因为您使用的是 react-router 6.22.1，因此您的代码可能已过时。我建议要么将你的react-router包降级到v5，要么看看这个迁移指南