react-router 4 刷新后页面导航高亮与路由地址匹配

Question

1.我是用的ant-design的menu导航，加上react-router 4，其他都正常，但是当刷新页面后，路由地址仍然保持刷新前，而menu不是

本来是想根据路由给menu设置defaultkey，就可以同步，但是menu是写在layout中，而layout是包裹各个route，无法再layout中获取当前路由地址，所以无法为menu设置默认key

请求各位大牛，能否告知是否可以在layout中获取当前路由地址，或者请教是否可以保持页面刷新后路由和menu高亮是一致的

相关代码

        <HashRouter>    
            <Layout>
                <Switch>
                    <Route path="/index" component={nav1} />
                    <Route path="/check" component={nav2} />
                    <Route path="/deliver" component={nav3} />
                    <Route path="/network/site" component={nav3} />
                    <Route path="/network/server" component={nav3} />
                </Switch>
            </Layout>
        </HashRouter>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

我遇到了同样的问题，我是通过给defaultSelectedKeys设置动态的值去匹配当前menu的key值，而menu的key值设置为路由的名字 也就是NavLink to='/aaa'，Menu.Item key='/aaa'，defaultSelectedKeys={[locate === '/' ? '/aaa' : locate]}，这里的locate为获取的pathname const locate = this.props.location.pathname + ''， 在react-router4中使用 import {withRouter } from 'react-router-dom'倒入withRouter，再用withRouter修饰当前component ： export default withRouter(App) 这样就可以动态去匹配啦。