React Router Dom如何将activeStyle默认设置为NavLink到所有当前或活动链接

Question

我有一个简单的导航组件，该组件是按以下方式创建的：

const Navigation = () => {
    return (
        <div>
            <NavLink exact to="/" activeStyle={{ color: 'red' }}>Home</NavLink>
            <NavLink to="/about" activeStyle={{ color: 'red' }}>About</NavLink>
            <NavLink to="/contact" activeStyle={{ color: 'red' }}>Contact</NavLink>
        </div>
    )
}

当我尝试导航到URL时，一切都很好，它呈现了预期的组件，并且还更改了 样式 > link 中的>，但是如果我有更多的 links ，我该如何重构或最小化由于冗余而引起的activeStyle={{ color: 'red' }}的代码或路线。这将是一团糟。

感谢有人可以帮助您。 预先感谢。