问题

• react-router-dom@6Route组件在element属性上呈现其内容。element属性采用React.ReactNode，即JSX。
• 所呈现的路径和到这些路径的链接应在路径上一致。
• Navbar组件应呈现RRD Link组件，而不是原始定位点<a>标记。链接目标路径在to属性中指定。

建议的解决方案

App.jsx

import './App.css';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Navbar from './components/Navbar/Navbar'
import Home from './components/Home/Home'
import Blog from './components/Blog/Blog'
import About from './components/About/About'

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/about" element={<About />} />

          {/* Redirect all unhandled paths to home page */}
          <Route path="*" element={<Navigate to="/home" replace />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

menuItems.js

export const menuItems = [
  {
    title: 'Home',
    url: '/home',
    cName: 'nav-links'
  },
  {
    title: 'Blog',
    url: '/blog',
    cName: 'nav-links'
  },
  {
    title: 'About',
    url: '/about',
    cName: 'nav-links'
  },
  {
    title: 'Sign up',
    url: '#',
    cName: 'nav-links-mobile'
  }
];

Navbar.jsx

import React, { useState } from 'react';
import { MenuItems } from './MenuItems';
import './Navbar.css'
import { Button } from '../Button'
import { NavLink as Link } from 'react-router-dom'

const Navbar = () => {
  const [clicked, setClicked] = React.useState(false);

  const handleClick = () => {
    setClicked(clicked => !clicked);
  }

  return (
    <nav className="NavbarItems">
      <h1 className="navbar-logo">Afrika-Link</h1>
      <div className="menu-icon" onClick={handleClick}>
        <i className={clicked ? 'fas fa-times' : 'fas fa-bars'} />
      </div>
      <ul className={clicked ? 'nav-menu active' : 'nav-menu'}>
        {MenuItems.map((item, index) => (
          <li key={index}>
            <Link className={item.cName} to={item.url}>
              {item.title}    
            </Link>
          </li>
        ))}
      </ul>
      <Button>Sign Up</Button>
    </nav>
  );
};

export default Navbar

将Route的path赋给数组中的url。确保它们匹配。

export const MenuItems = [
    {
        title: 'Home',
        url: '/components/Home/Home',
        cName: 'nav-links'
    },
    {
        title: 'Blog',
        url: '/components/Blog/Blog',
        cName: 'nav-links'
    },
    {
        title: 'About',
        url: '/components/About/About',
        cName: 'nav-links'
    },
    {
        title: 'Sign up',
        url: '#',
        cName: 'nav-links-mobile'
    }
]

并将<a href="" />转换回<Link />

<li key={index}>
  <Link className={item.cName} to={item.url}>
    {item.title}
  </Link>
</li>

我希望以下解决方案可以帮助您：

• • 应用程序js**

function App() {
  return (
    <div className="App">
    <Router>
      <Navbar />
      <Routes>
        <Route path='/home' component={<Home />} />
        <Route path='/blog' component={<Blog />} >
        <Route path='/about' component={<About />} />
      </Routes>
    </Router>
    </div>
  );
}

• • 菜单项. js**

export const MenuItems = [
    {
        title: 'Home',
        url: '/home',
        cName: 'nav-links'
    },
    {
        title: 'Blog',
        url: '/blog',
        cName: 'nav-links'
    },
    {
        title: 'About',
        url: '/about',
        cName: 'nav-links'
    },
    {
        title: 'Sign up',
        url: '#',
        cName: 'nav-links-mobile'
    }
]