当用户单击react-router-dom上的后退按钮时，如何更改组件的状态？

Question

I'm building a small dashboard for a company. I have a Router in the whole application and in the / path I'm showing 5 <Link /> to move through different pages inside the same dashboard. The thing I wanted to achieve is that I have to hide these <Link /> tags when entering a different section of the application. I'm doing this by changing states and it's working all right.

But the real problem comes when I hit the back button, because the state is not changing. Example, when I click Patients the visibleMenu state changes to false, to hide the menu. When I click on dashboard, the visibleMenu state changes again to true. When I click the back button, the visibleMenu state stays the same as before clicking the back button.

Is there a way to handle the back button press with react-router-dom , so when a user hits back I can check the URL change an set the visibleMenu state accordingly?

Edit

I'm adding some code for you to see.

The menu component is this:

       <div className={this.props.className}>
            <div>
                <ul className={'dashboardLinks ' + (this.state.visibleMenu ? 'show' : 'hide')}>
                    <li>
                        <Link to="/patients" className="br10 sh1 anim-1" onClick={this.hideMenu}>
                            <span className="fa fa-users"></span>
                            Patients
                        </Link>
                    </li>
                    <li>
                        <Link to="/filter" className="br10 sh1 anim-1" onClick={this.hideMenu}>
                            <span className="fa fa-filter"></span>
                            Filter Data
                        </Link>
                    </li>
                    <li>
                        <Link to="/search" className="br10 sh1 anim-1" onClick={this.hideMenu}>
                            <span className="fa fa-search"></span>
                            Quick Search
                        </Link>
                    </li>
                    <li>
                        <Link to="/account" className="br10 sh1 anim-1" onClick={this.hideMenu}>
                            <span className="fa fa-user"></span>
                            My Account
                        </Link>
                    </li>
                    <li>
                        <a href="#logout" className="br10 sh1 anim-1" onClick={this.props.logout}>
                            <span className="fa fa-sign-out"></span>
                            Logout
                        </a>
                    </li>
                </ul>
                <Route path="/patients" component={Patients}></Route>
                <Route path="/patients/:id" component={PatientInfo}></Route>
                <Route path="/filter" component={Filter}></Route>
                <Route path="/search" component={Search}></Route>
                <Route path="/account" component={Account}></Route>
            </div>
        </div>

There you can see how I'm showing and hiding the menu depending on a state. That state I need to check if the user reloads the page, to set it according to the URL, if it's only "/" then show the menu, else, don't show it.

I'm doing like this:

componentWillMount() {
    var url = window.location.pathname;
    if(url === '/') {
        this.setState({
            visibleMenu: true
        });
    } else {
        this.setState({
            visibleMenu: false
        });
    }
}

But if the user clicks the back button then the state is not updated, so the menu won't show.

Answer 1

由于我没有收到任何答案，所以我只是重新构造了Web应用程序，以声明任何选项的Routes 。