react-router返回页面如何配置历史记录?

问题描述

有人可以告诉我如何返回上一页而不是特定路线吗?

Can anyone please tell me how I can go back to the previous page rather than a specific route?

使用此代码时:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

出现此错误，由于没有路由器历史记录，因此 goBack()被忽略了

Get this error, goBack() was ignored because there is no router history

这是我的路线:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
     <Route name="contacts" handler={ContactPage} />
     <Route name="contact-detail" handler={ContactDetailPage} />
     <Route name="settings" handler={SettingsPage} />
 </Route>
 );

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render(<Handler /> , mountNode);
 });

推荐答案

我认为您只需要通过像这样设置<Router history={new BrowserHistory}>即可在路由器上启用BrowserHistory.

I think you just need to enable BrowserHistory on your router by intializing it like that : <Router history={new BrowserHistory}>.

在此之前，您应该要求'react-router/lib/BrowserHistory'

Before that, you should require BrowserHistory from 'react-router/lib/BrowserHistory'

我希望能对您有所帮助！

I hope that helps !

UPDATE:ES6中的示例

UPDATE : example in ES6

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

const App = React.createClass({
    render: () => {
        return (
            <div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App} />
    </Router>
), document.body);

这篇关于react-router返回页面如何配置历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！