时间戳

首页 > 解决方案 > src\App.js 'nav' 已定义但从未使用 no-unused-vars

javascript - src\App.js 'nav' 已定义但从未使用 no-unused-vars

问题描述

无法在 reactjs 中创建导航栏。

应用程序.js

import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Home from './Routes/Home'
import About from './Routes/About'
import Contact from './Routes/Contact'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import nav from './nav'


function App() {
  return (
    <div className="App">
      
      <BrowserRouter>
      <nav/>
      
      <Routes>
      <Route>
      
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/about" element={<About/>} />
        <Route exact path="/contact" component={<Contact/>} />
      </Route>
      </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;

导航.js

import React from 'react'
import {Link} from 'react-router-dom'

function nav(){
    return <div>
      <nav>
          <Link to="/" >Home</Link>
          <Link to="/about" >About</Link>
          <Link to="/contact" >Contact</Link>
      </nav>

    </div>
}

export default nav

终端显示“ Compiled with warnings. src\App.js Line 7:8: 'nav' is defined but never used no-unused-vars
搜索关键字以了解有关每个警告的更多信息。
要忽略，请添加 // eslint- disable-next-line 到前一行。 "

标签： javascriptreactjs

解决方案

<nav/>是一个有效的 HTML 标记，因此 ESLint 认为您的 JSX 引用的是该 HTML 标记，而不是包含您导入的组件的变量。

我建议将您的组件重命名Nav为消除所有歧义。

推荐阅读