在 React Router v4 中为 NavLink 设置默认的 activeClassName

Question

有没有办法在 React Router v4 中为 NavLink 设置默认值 activeClassName 而不必为每个 NavLink?

<NavLink activeClassName='active' to='/one/'>one</NavLink>
<NavLink activeClassName='active' to='/two/'>two</NavLink>
<NavLink activeClassName='active' to='/three/'>three</NavLink>

最好只写：

<NavLink to='/one/'>one</NavLink>
<NavLink to='/two/'>two</NavLink>
<NavLink to='/three/'>three</NavLink>

Answer 1

制作包装纸？

const MyNavLink = ({ children, ...props }) => (
  <NavLink activeClassName="active" {...props}>
    {children}
  </NavLink>
);

<MyNavLink to='/one/'>one</MyNavLink>

在 React Router v4 中为 NavLink 设置默认的 activeClassName

Set default activeClassName for NavLink in React Router v4

reactjs

react-router

react-router-v4