無法在 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-禁用下一行到前一行。 ”
uj5u.com熱心網友回復：
<nav/> 是一個有效的 HTML 標記，因此 ESLint 認為您的 JSX 正在參考該 HTML 標記，而不是保存您匯入的組件的變數。
我建議重命名您的組件Nav以消除所有歧義。
uj5u.com熱心網友回復：
發生這種情況是因為您的編譯器無法識別正在使用的 JSX 語法。
所以，你必須安裝：
npm install eslint-plugin-react --save-dev
然后在你的.eslintrc.json檔案中你應該添加react/jsx-uses-react
uj5u.com熱心網友回復：
從檔案中，
如果以下任何一項為真，則認為使用變數 foo：
它被呼叫 (foo()) 或構造 (new foo())
它被讀取（var bar = foo）
它作為引數傳遞給函式 (doSomething(foo))
它在傳遞給另一個函式的函式內部讀取 (doSomething(function() { foo(); }))
也就是說，您可能會缺少一些決議，因此您的有效 jsx 和 reactjs 語法可以是有效的 eslint 語法：
eslint 插件反應
uj5u.com熱心網友回復：
您可能出錯的三種可能性：-
- React 會顯示此錯誤，因為每當有人宣告變數但未使用它時。在您的情況下，您沒有在整個 App.js 檔案中使用此導航。
import nav from './nav'
- 你忘記啟動了
<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;
- 或者react中的自定義組件總是以大寫字母開頭，不是這樣的
<nav> <nav/>
但像這樣
<Nav> <Nav/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/353359.html
標籤：javascript 反应