問題：
React 路由鉤子可以在函陣列件中使用來檢索當前路由。
但是，我找不到類組件的任何參考。
功能方式
案件：
我有一個導航選單，我想通過根據當前狀態切換 css 類來跟蹤當前路線以在前端突出顯示它。
導航摘錄：
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
...
export default class Nav extends Component {
...
render = (): JSX.Element => {
return (
<>
{/* Current: "border-green-500 text-gray-900" */}
{/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
<Link to="/"
className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
Home
</Link>
</>
);
}
}
問題：
是否有任何方法可以在 React 類組件中實作此目標？
預期答案：
- 參考作業示例
- 代碼片段
- 解釋為什么這不起作用
- 替代方案
先感謝您！
感謝@genius fox dev，這個解決方案對我有用！
解決方案：
{/* Current: "border-green-500 text-gray-900" */}
{/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
<NavLink // from 'react-router-dom'
to="/"
className={
( {isActive} ) => ( isActive
? 'border-green-500 text-gray-900'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
).concat( ' inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' )
}
>
Home
</NavLink>
uj5u.com熱心網友回復：
您可以使用 react-router-rom v6.0 支持的 NavLink。
首先，將鏈接更改為navlink，然后仔細顯示下面的代碼。
<NavLink
style={({ isActive }) => {
return {
display: "block",
margin: "1rem 0",
color: isActive ? "red" : ""
};
}}
to={`/invoices/${invoice.number}`}
key={invoice.number}
>
{invoice.name}
</NavLink>
請參考網址。 https://reactrouter.com/docs/en/v6/getting-started/tutorial#active-links
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404544.html
標籤：