使用react-router-dom点击导航栏无法跳转React组件的问题

你的导航跳转失效主要是React Router v6的语法使用错误，还有几处代码细节问题，以下是修正方案：

核心问题：Route组件语法错误（React Router v6） #

React Router v6 彻底移除了component属性，改用element属性传递组件实例；同时exact属性也不再需要，因为<Routes>默认会做精确匹配。

分步修正 #

1. 修正App.js的路由配置 #

替换旧的Route写法，补充缺失的路由：

import "./App.css";
import Navbar from "./Components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Components/Home";
import Select from "./Components/Select";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          {/* 使用element替代component，移除exact */}
          <Route path="/" element={<Home />} />
          <Route path="/cats" element={<Select />} />
          {/* 补充Sheeps和Goats的路由，若有专属组件可替换<Select /> */}
          <Route path="/sheeps" element={<Select />} />
          <Route path="/goats" element={<Select />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2. 修复Navbar的DOM结构与无用代码 #

• HTML规范中<li>必须包裹在<ul>或<ol>内，否则会导致DOM结构不合法，可能影响路由事件绑定
• 移除未使用的Home/Select导入和无用的props参数

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div className="navbar">
      <ul>
        <li>
          <Link to="/">Dogs</Link>
        </li>
        <li>
          <Link to="/cats">Cats</Link>
        </li>
        <li>
          <Link to="/sheeps">Sheeps</Link>
        </li>
        <li>
          <Link to="/goats">Goats</Link>
        </li>
      </ul>
    </div>
  );
}

export default Navbar;

3. 额外检查项 #

• 确保你安装的是react-router-dom v6版本，若安装的是v5需升级：npm install react-router-dom@latest
• 确认组件文件路径正确（比如./Components/Home是否对应实际文件位置）

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