Question

使用react-router 4.2.2

遵循https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md的文件（这是一个很好的例子）

我有以下

<MemoryRouter
   initialEntries={[
     '/one',
     '/two'
 ]}>
     <div>
       <Route path="/one" component={FirstPage} />
       <Route path="/two" component={SecondPage} />
     </div>
 </MemoryRouter>

然后，我可以使用以下内容轻松导航页面：

this.props.history.push('/two');

这是按预期工作的。但是，当我点击我的浏览器后退按钮时，它不会让我回到之前的路线。

虽然我可以轻松地在屏幕上显示导航按钮，但我还是希望浏览器后退按钮能够正常工作。内存路由器可以这样做吗？如果是这样，怎么样？

Answer 1

我的理解是Memory Router特别不会在浏览器的历史记录中写任何内容，因此您需要手动处理。您可以做的一件事是添加一个事件监听器：

componentDidMount() {
    window.onpopstate = this.handleNavigation.bind(this);
}

handleNavigation(event) {
    if (//event is going back) {
        this.props.history.go(-1); // Or .goBack() if available, or whatever the equivalent is. Possibly will need to keep track of currentLocation in relation to an array and navigate that way.
    } else if (//If event is going forward) {
        this.props.history.go(1); // Or .goForward() if available
    }
}

内存路由器不使用浏览器后退按钮

1 个答案: