TA貢獻1735條經驗 獲得超5個贊
這是工作示例：
https://codesandbox.io/s/patient-cherry-tpf50
注意：您需要"react-router-dom": "5.2.0"在package.json文件中添加此依賴項。
反應代碼：
import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import "./styles.css";
export default function App() {
return (
<Router>
<div className="App">
<div className="topnav">
<NavLink to="/home" activeClassName="active">
Home
</NavLink>
<NavLink to="/news" activeClassName="active">
News
</NavLink>
<NavLink to="/contact" activeClassName="active">
Contact
</NavLink>
<NavLink to="/about" activeClassName="active">
About
</NavLink>
</div>
</div>
</Router>
);
}
款式：
.App {
font-family: sans-serif;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a.active {
background-color: #1144ff;
color: #ffffff;
}
a:hover {
background-color: #ddd;
color: black;
}
TA貢獻1876條經驗 獲得超5個贊
我使用樣式化組件管理了類似的東西。它允許您根據道具設置組件樣式。
我有一個包含食譜的頁面，頂部有一個類別欄，其中包含用戶可以過濾食譜的蛋白質列表。我創建了一個 activeCategory 狀態，默認情況下將其設置為“全部”，但當用戶單擊它時，它會更改為選擇的任何蛋白質。我只是將該狀態作為道具傳遞給 categoryBar 組件，并在它是活動類別時更改所選蛋白質的背景顏色。
您可以在 CategoryBar.js 的第 12 行中明白我的意思。如果您想查看狀態，Picker.js 是父組件。
https://github.com/Taouen/gobble/tree/master/src/components
舉報