React router v6 如何在 class 组件中获取当前路由

Question

问题：

React router hooks 可以在函数组件中使用来获取当前路由。

但是，我找不到 class 组件的任何参考资料。

Functional way

案例：

我有一个导航菜单，我想通过根据当前状态切换 css classes 来跟踪当前路线以在前端突出显示它。

导航摘录：

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 class 组件中实现这个目标吗？

预期答案：

参考工作示例
代码片段
解释为什么这不起作用
备选方案

提前致谢！

感谢@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>

Answer 1

你可以使用 NavLink 在 react-router-rom v6.0 支持。

先把link改成navlink，然后仔细看下面的代码。

      <NavLink
        style={({ isActive }) => {
          return {
            display: "block",
            margin: "1rem 0",
            color: isActive ? "red" : ""
          };
        }}
        to={`/invoices/${invoice.number}`}
        key={invoice.number}
      >
        {invoice.name}
      </NavLink>

请参考url。 https://reactrouter.com/docs/en/v6/getting-started/tutorial#active-links

React router v6 如何在 class 组件中获取当前路由

React router v6 how to get current route in class component

javascript

reactjs

react-router

react-component

问题：

案例：

问题：

预期答案：

解决方案：