React路由组件未加载及ESLint未使用变量警告问题求助

我通过npm创建了一个ReactJS项目，侧边栏包含home、tools、admin等链接，点击链接应切换主内容区对应的组件。App组件代码如下：

import React, { Component } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './page-structur/Navbar';
import Sidebar from './page-structur/sidebar';
import Home from './contentscomponens/home'
import administration from './contentscomponens/admin'
import PFE from './contentscomponens/pfe'
import CP from './contentscomponens/cp'
import Tools from './contentscomponens/additionaltools'

import '../../css/accueil/accueil.css'

class App extends Component{
  render() {
    return (
      <React.Fragment>
        <BrowserRouter>
          <div className=" flex-column" id="sidebar">
            <Sidebar />
          </div>
                
          <div id="rest" className="flex-column">
            <nav className="navbar navbar-expand-sm navbar-dark shadow-5-strong sticky-top container-fluid">
              <Navbar />
            </nav>
            <main id="main-content">
              <Routes>
                <Route exact path="/" component={Home} />
                <Route path="/administration" component={administration} />
                <Route path="/pfe" component={PFE} />
                <Route path="/cp" component= {CP} />
                <Route path="/tools" component= {Tools} />
              </Routes>
            </main>
          </div>
        </BrowserRouter>
      </React.Fragment>
    );
  }
}
export default App;

运行项目时终端出现ESLint警告：

[eslint]
src\js\components\App.js
Line 2:23: 'Routes' is defined but never used no-unused-vars
Line 2:30: 'Route' is defined but never used no-unused-vars
Line 6:8: 'Home' is defined but never used no-unused-vars
Line 7:8: 'administration' is defined but never used no-unused-vars
Line 8:8: 'PFE' is defined but never used no-unused-vars
Line 9:8: 'CP' is defined but never used no-unused-vars
Line 10:8: 'Tools' is defined but never used no-unused-vars

同时Route无法加载组件，内容区始终为空，请求协助解决该问题。

你的问题核心是使用了react-router-dom v6版本的语法，但误用了v5的API，导致路由无法识别组件，同时触发ESLint未使用变量警告。具体修复步骤如下：

1. 修正Route组件的属性 #

在react-router-dom v6中，Route组件不再使用component属性指定渲染组件，而是改用element属性，且需要传入JSX元素（即<Home />而非Home）。同时v6中Route默认就是精确匹配，不再支持exact属性。

修正后的Routes代码：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/administration" element={<administration />} />
  <Route path="/pfe" element={<PFE />} />
  <Route path="/cp" element={<CP />} />
  <Route path="/tools" element={<Tools />} />
</Routes>

2. 规范组件命名（可选但推荐） #

React组件命名通常采用大驼峰格式，你的administration组件首字母小写，建议改成Administration，避免潜在识别问题：

• 导入时：import Administration from './contentscomponens/admin'
• 路由中：<Route path="/administration" element={<Administration />} />

3. 验证Sidebar中的链接 #

确保侧边栏的链接使用react-router-dom提供的Link组件，而非原生<a>标签，否则会导致页面刷新而非单页路由切换：

// Sidebar组件内的链接示例
import { Link } from 'react-router-dom';

// ...
<Link to="/">Home</Link>
<Link to="/administration">Admin</Link>
<Link to="/tools">Tools</Link>
// ...

完成以上修改后，ESLint的未使用变量警告会自动消失，路由也能正常加载对应组件。

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