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

Question

我正在为一家公司构建一个小型仪表板。我在整个应用程序和 / 中有一个路由器我显示的路径 5 <Link />在同一仪表板内的不同页面之间移动。我想要实现的目标是我必须隐藏这些<Link />进入应用程序的不同部分时的标签。我通过改变状态来做到这一点，并且一切正常。

但是当我点击后退按钮时，真正的问题出现了，因为状态没有改变。例如，当我单击患者时，visibleMenu state 更改为 false，以隐藏菜单。当我单击仪表板时，visibleMenu状态再次变为 true。当我单击后退按钮时，visibleMenu状态与单击后退按钮之前保持相同。

有没有办法用 react-router-dom 来处理后退按钮按下的情况？ ，因此当用户回击时，我可以检查 URL 更改并设置 visibleMenu相应地说明？

编辑

我正在添加一些代码供您查看。

菜单组件是这样的:

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

在那里您可以看到我如何根据状态显示和隐藏菜单。这种状态我需要检查用户是否重新加载页面，根据URL进行设置，如果只是“/”则显示菜单，否则不显示。

我这样做:

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

但是如果用户单击后退按钮，则状态不会更新，因此菜单不会显示。

Answer 1

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