ActiveClassName in NavLink requires page-reload to display

Question

I want to add some style to my menu's upon being active. The active style only displays after reloading the page.

        <Menu.Item className="law" header as={NavLink} exact to="/law" activeClassName="test">  
                </Menu.Item>
        <Menu.Item className="revision" header as={NavLink} exact to="/revisions" activeClassName="test">
               </Menu.Item>
        <Menu.Item className="changes" header as={NavLink} exact to="/changes" activeClassName="test">
               </Menu.Item>
                <Menu.Item className="settings" header as={NavLink} exact to="/settings" activeClassName="test">
             </Menu.Item>

Any suggestions on how i can make the ActiveClassName trigger without a page-reload?

Answer 1

我能想到的唯一问题可能是这里的问题，就是ReactRouter NavLink组件就像你使用<Menu.Item />而不是普通的<NavLink />组件一样