如何在 React Router 中使用后退按钮

Question

我在使用 ReactRouter 时遇到问题。

下面是我如何初始化和运行路由器：

var routes = (
  <Route handler={App}>
    <DefaultRoute handler={Domains}/>
    <Route path="login" name="login" handler={Login}/>
    <Route path="signup" name="signup" handler={SignUp}/>
  </Route>);

var config = {routes, location: Router.HistoryLocation};
const router = Router.create(config);
export default router;

$(document).ready(() => {
  router.run( (Root) => {
    React.render(<Root/>, document.getElementById('maincontent'));
  });
});

阅读文档，这样我希望我在按下浏览器的后退按钮时，或者使用 goBack() 方法浏览器转到上一页。

相反，当我使用 goBack() 方法时，首先从 url 中删除一个哈希（方法 transitionTo 添加），然后再次调用它，它才能工作。按钮也是如此。

Answer 1

根据文档，如果您想使用 HistoryLocation，您必须配置您的服务器来处理它。..

React Router Documentation - HistoryLocation

（一个 nodejs 示例）：

app.get('*', function (req, res) {
  res.render('index');
});

否则，您将需要使用 HashLocation，因为这会将其保持在同一页面上。

如果设置正确，您可以通过接收router.run -- state 中的第二个道具来调试路由器中发生的事情。

Here's the properties state contains.

Router.run(routes, function(Handler, state) {
    console.log(state);
    React.render(<Handler>);
});