How to trigger BottomNavigation without clicking

It seems that when we want to change the state of BottomNavigation, we must click to achieve it. When I refresh the page or back to the previous page, I want to change the state of BottomNavigation (such as color), how to achieve it?

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I want to get the pathname through useLocation, and switch the color of BottomNavigation through pathname. But I cannot trigger the BottomNavigation component through non-click events.

Expected Behavior 🤔

Whether it is refreshing the page or back to the page, the color of the BottomNavigation of the current page can be maintained correctly.

Your Environment 🌎

`npx @material-ui/envinfo`

   System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 15.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - F:\rematch-jl\node_modules\.bin\yarn.CMD
    npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
  npmPackages:
    @material-ui/core: latest => 4.11.4
    @material-ui/icons: latest => 4.11.2
    @material-ui/styles:  4.11.4
    @material-ui/system: latest => 4.11.3
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: latest => 17.0.4
    react: latest => 17.0.2
    react-dom: latest => 17.0.2
    styled-components: latest => 5.2.3
    typescript: latest => 4.2.4

[oliviertassinari]

@arpitBhalla I’m not sure we need a full demo for this, it seems straightforward to implement. What if we start by a simple header section that links back to the routing page?

[oliviertassinari]

It seems to me that the author wants to use a value prop, as in https://next.material-ui.com/components/bottom-navigation/#bottom-navigation.

Maybe we should add a header like this one https://next.material-ui.com/components/tabs/#third-party-routing-library in the docs?