After react-router 4 refresh, the page navigation highlights match the routing address.

1. I use ant-design "s menu navigation, plus react-router 4, everything else is normal, but when the page is refreshed, the routing address remains before refresh, while menu is not

I originally wanted to set defaultkey, for menu and Synchronize, but menu is written in layout, and layout is a package of route, that cannot get the current routing address in layout, so the default key cannot be set for menu

ask Daniel, can you tell me whether you can get the current routing address in layout, or whether you can keep the route and menu highlighting consistent after page refresh

related codes

        <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>

what result do you expect? What is the error message actually seen?

Apr.02,2021

I encountered the same problem. I set a dynamic value to defaultSelectedKeys to match the key value of the current menu, while the key value of menu is set to NavLink to='/aaa' , Menu.Item key='/aaa' , defaultSelectedKeys= {[locate ='/'?'/ aaa': locate]} , where locate is the obtained pathname const locate = this.props.location.pathname +'. In react-router4, use import {withRouter} from 'react-router-dom' to pour in withRouter, and decorate the current component with withRouter: export default withRouter (App) so that you can match dynamically.

Menu