ReactJS中的路由器activeClassName不起作用

Question

我的React App中的路由器activeClassName出现问题。 我正确设置了路线，一切正常。我附加了activeClassName规则，当我检查链接元素时，它们应该在单击时切换className，这就是activeClassName应该如何工作，但这就是问题所在。当我单击链接元素时，没有任何反应，它无法识别activeClassName规则，因此不会应用任何类。

这是代码段。

import React from 'react';
import { NavLink } from 'react-router-dom'
import classes from './Classes.module.css'
const navigation =(props)=>{
      return(
            <div>
                <NavLink activeClassName={classes.Active} exact to="/">HOME</NavLink>
                <NavLink activeClassName={classes.Active} exact to="/about">ABOUT</NavLink>
                <NavLink activeClassName={classes.Active} exact to="/contact">CONTACT</NavLink>   
            </div>
)}

CSS

.Active{
     background-color: red;
}

谢谢！