自定义Navbar结合react-router-dom点击无内容问题求助

你的代码主要存在三个核心问题，均属于react-router-dom v6版本的使用规范和路由配置错误：

1. 路由组件API使用错误 #

react-router-dom v6版本的<Route>组件不再支持component属性，需改用element属性，且必须传入JSX元素（如<Home />）而非组件本身。

2. 路由路径配置逻辑错误 #

你设置的路由路径是组件文件的物理路径（/components/Home/Home），但路由路径应为浏览器地址栏显示的URL路径（如/、/blog），与组件文件的存储路径无关。

3. 导航链接未正确适配路由系统 #

虽然你导入了Link组件，但实际仍在使用原生<a>标签跳转，且MenuItems中的url是文件相对路径，与路由路径不匹配，无法触发单页应用的路由跳转逻辑。

修改后的代码 #

App.js

import './App.css';
import { BrowserRouter as Router, Route, Routes } 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='/' element={<Home />} />
          <Route path='/blog' element={<Blog />} />
          <Route path='/about' element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Navbar.js

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

class Navbar extends Component {
    state = {
        clicked: false
    }

    handleClick = () => {
        this.setState({ clicked : !this.state.clicked })
    }

    render() {
        return(
            <nav className="NavbarItems">
                <h1 className="navbar-logo">Afrika-Link</h1>
                <div className="menu-icon" onClick={this.handleClick}>
                    <i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
                </div>
                <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
                    {MenuItems.map((item, index) => {
                        return (
                            <li key={index}>
                                {/* 替换原生a标签为Link组件，用to属性指定路由路径 */}
                                <Link className={item.cName} to={item.url}>
                                    {item.title}    
                                </Link>
                            </li>
                        )
                    })}
                </ul>
                <Button>Sign Up</Button>
            </nav>
        )
    }
}

export default Navbar

MenuItems.js

export const MenuItems = [
    {
        title: 'Home',
        url: '/', // 对应首页路由路径
        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'
    }
]

额外提示 #

• 若需处理404页面，可在Routes末尾添加通配符路由：<Route path='*' element={<NotFound />} />
• 你导入的Link实际是NavLink，它会自动给当前活跃的链接添加active类，可在Navbar.css中通过.nav-links.active设置高亮样式

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