在React项目中添加Link组件导致页面崩溃的问题求助

你页面崩溃的核心原因是Navbar组件不在BrowserRouter的上下文范围内，react-router-dom的Link必须在Router组件包裹的区域内才能正常工作，而你的App里Navbar是在BrowserRouter外面渲染的，这就导致Link无法获取路由上下文，直接抛出错误。另外还有两个小问题需要修正：根路由缺少对应渲染元素，以及Navbar里存在未使用的冗余导入。

修复步骤1：调整App组件结构，将Navbar移入BrowserRouter内部 #

把Navbar放到BrowserRouter组件内部，确保它处于路由上下文之中：

import React from 'react'
import './index.css'
import Navbar from './Components/Navbar'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import About from './Components/About'
import Projects from './Components/Projects'
import Skills from './Components/Skills'
import Contact from './Components/Contact'

function App() {
  return (
    <BrowserRouter> {/* 把整个应用包裹在Router中 */}
      <Navbar /> {/* Navbar现在处于路由上下文内 */}
      <Routes>
        {/* 给根路由添加渲染元素，后续可替换为自定义Home组件 */}
        <Route path="/" element={<h1>首页</h1>} />
        <Route path="/about" element={<About />} />
        <Route path="/projects" element={<Projects />} />
        <Route path="/skills" element={<Skills />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

修复步骤2：修改Navbar组件，正确使用Link包裹列表项 #

注意ul的直接子元素必须是li，所以正确写法是在li内部放置Link组件，同时移除未使用的冗余导入：

import React, {useState} from 'react'
import {AiOutlineClose, AiOutlineMenu} from 'react-icons/ai'
import { Link } from 'react-router-dom'

const Navbar = () => {
    const [nav, setNav] = useState(true)

    const handleNav = () => {
        setNav(!nav)
    }

  return (
    <div className="flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-blue font-bold">
        <h1 className="w-full text-3xl font-bold text-[#4bb3f8] hover:scale-105 duration-300">TIM WARD</h1>
        <ul className="hidden md:flex text-[#4bb3f8]">
            <li className="p-4"><Link to="/">MAIN</Link></li>
            <li className="p-4"><Link to="/about">ABOUT</Link></li>
            <li className="p-4"><Link to="/skills">SKILLS</Link></li>
            <li className="p-4"><Link to="/projects">PROJECTS</Link></li>
            <li className="p-4"><Link to="/contact">CONTACT</Link></li>
        </ul>
        <div onClick={handleNav} className="block md:hidden">
            {!nav ? <AiOutlineClose size={20} color='#4bb3f8'/> : <AiOutlineMenu size={20} color='#4bb3f8'/>}
        </div>
        <div className={!nav ? "fixed left-0 top-0 w-[60%] h-full border-r border-r-gray-900 bg-[#4bb3f8] ease-in-out duration-200" : "fixed left-[-100%]"}>
          <h1 className="w-full text-3xl font-bold text-[#4bb3f8] m-4">TIM WARD</h1>
          <ul className="uppercase p-4">
            <li className="p-4 border-b border-gray-600"><Link to="/">MAIN</Link></li>
            <li className="p-4 border-b border-gray-600"><Link to="/about">ABOUT</Link></li>
            <li className="p-4 border-b border-gray-600"><Link to="/skills">SKILLS</Link></li>
            <li className="p-4 border-b border-gray-600"><Link to="/projects">PROJECTS</Link></li>
            <li className="p-4 border-b border-gray-600"><Link to="/contact">CONTACT</Link></li>
          </ul>
        </div>
    </div>
  )
}

export default Navbar

额外说明 #

• 根路由path="/"必须指定element，否则访问首页时会无内容渲染，你可以后续创建自定义Home组件替换示例中的<h1>首页</h1>。
• 移除了Navbar中未使用的import About from './About'，避免冗余代码。

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