路线包含可选参数时不使用NavLink活动类

Question

考虑一个场景

const AppContainer = () => {
    return (
        <Switch>
            <Route exact path="/" render={() => (
                <Redirect to="/testResults/protocol1"/>
            )}/>
            <Route path='/testResults' component={ProtocolTabs} />
            <Route path='/protocol1TestDetails/:protocolId/:startDate/:endDate' component={Protocol1TestDetails} />
        </Switch>
    );
}

class ProtocolTabs extends React.Component{
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <ul className="header">
                    <li><NavLink to="/testResults/protocol1">Protocol 1 </NavLink></li>
                    <li><NavLink to="/testResults/protocol2">Protocol 2 </NavLink></li>
                </ul>
                <div className="content">
                    <Switch>
                        <Route path="/testResults/protocol1/:startDate?/:endDate?" component={Protocol1} />
                        <Route path="/testResults/protocol2" component={Protocol2} />
                    </Switch>
                </div>
        </div>
        );
    }
}


ReactDOM.render(
        <HashRouter>
            <AppContainer/>
        </HashRouter>
        ,document.getElementById('appContainer')
    );

基本上，当应用程序加载时，我想从“ /”重定向到“ / testResults / protocol1”，没有开始和结束日期。 Protocol1组件可以正确加载，但

<NavLink to="/testResults/protocol1">Protocol 1 </NavLink></li>

没有上课。

另外，当用户更改Protocol1组件中的日期过滤器时，URL更新，但数据仍更新

<NavLink to="/testResults/protocol1">Protocol 1 </NavLink></li>

没有上课吗？ 是什么原因，以及如何通过可选参数确保NavLinks获得活动类。