当前位置: 首页 > 面试题库 >

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

邵麒
2023-03-14
问题内容

谁能告诉我如何返回上一页而不是特定路线?

使用此代码时:

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()被忽略了

这是我的路线:

// 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);
 });

问题答案:

我想你只需要通过intializing它就像你的路由器上启用BrowserHistory: <Router history={new BrowserHistory}>

在此之前,您应该需要BrowserHistory'react-router/lib/BrowserHistory'

希望对您有所帮助!

UPDATE: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 v3迁移到v4时遇到一些小问题。在v3中,我可以在任何地方执行此操作: 如何在v4中实现这一目标。 我知道当您在Component中时,可以使用hoc ,react上下文或事件路由器props。但对我而言并非如此。 我正在寻找v4中的NavigatingOutsideOfComponents的等效项 问题答案: 您只需要有一个导出对象的模块。然后,您将在整

  • 问题内容: 在当前版本的React Router(v3)中,我可以接受服务器响应并用于转到相应的响应页面。但是,这在v4中不可用,我不确定哪种适当的处理方式。 在此示例中,使用Redux,当用户提交表单时, components / app-product-form.js 调用。服务器返回成功后,该用户将被带到“购物车”页面。 如何从React Router v4的功能重定向到购物车页面? 问题答

  • 问题内容: 试图弄清楚如何返回上一页。我在用 这是我在第一个登录页面中配置的代码: 为了转发到后续页面,我只需执行以下操作: 但是,如何返回上一页?尝试了以下一些事情,但没有运气:1。 给出错误: TypeError:null不是对象(评估“ this.props”) 给出错误: TypeError:null不是对象(评估“ this.context”) 给出错误: TypeError:null不

  • 问题内容: 我一直在跟踪Tyler Mcginnis的教程,并用React Router遇到了麻烦,尤其是历史记录。我最终逐字复制了他的代码只是为了看看是否只有我一个人,但我仍然 实现是: 我注意到的是模块中不存在,而是模块内部。遵循找到的API文档,我认为必须通过以下位置调用它: 这样做会产生错误。删除括号,会导致与上述历史记录相同的错误。 当我记录历史记录时,绝对是不确定的,这使我相信问题与i

  • 问题内容: 我有我的应用程序,您需要登录才能进入其他页面。 因此,第一页是“登录”,它会检查您是否已经登录,如果已登录,则将您重定向到主页应用程序;否则,它将显示您的登录页面。 现在的问题是,当用户位于已登录页面区域内时,他单击返回,将转到“登录”页面,然后将其重定向回主页,因为该用户已经登录。 因此,他陷入了无限循环。 如何从历史记录中删除登录页面。 就像在android中“ android从历