以下代碼片段給了我這個錯誤。
Line 2:10: 'navBar' is defined but never used no-unused-vars
我究竟做錯了什么？
應用程式.js
import React from 'react'
import { navBar } from './components/navBar'
const App = () => {
return (
<navBar/>
)
}
export default App
導航欄.js
import React from 'react';
import { Link } from "react-router-dom";
const navBar= () =>{
return (
<div>
<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>
</div>
);
}
export default navBar
uj5u.com熱心網友回復：
該<Link>組件應該在內部使用BrowserRouter。
import React from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";
export default function NavBar() {
return (
<Router>
<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>
</Router>
);
}
uj5u.com熱心網友回復：
因為您使用匯出默認值，所以您應該修復
import navBar from './components/NavBar'
并按照編碼約定將 navBar 命名為 NavBar。
uj5u.com熱心網友回復：
React 是一個單頁框架，因此您需要動態更改組件，為此使用 react 路由器。如果您需要處理頁面作為公共訪問，您可以使用Nextjs。它有一個基于內置檔案的路由
重要：Nextjs 具有服務器端渲染，因此在構建動態資料更新時要小心
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/489419.html
標籤：javascript html 反应 反应路由器 成分