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

Question

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

但是当我按下后退按钮时真正的问题出现了，因为状态没有改变。例如，当我单击 Patients 时，visibleMenu 状态变为 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 应用程序，以声明 Routes 任何选项。

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

How to change component's states when user clicks back button on react-router-dom?

javascript

ecmascript-6

reactjs

react-router-dom

编辑