如何配置历史记录?

有没有人能告诉我如何回到上一页，而不是具体的路线?

当使用此代码时:

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

当前回答

如果你在应用程序中使用react-native抽屉导航作为主路由器，并希望控制返回按钮的行为和历史返回，你可以使用控件返回按钮。

< NavigationContainer > <抽屉。导航器 backBehavior = "历史" > //你的屏幕在这里 < /抽屉里。导航器> < / NavigationContainer >

2022-10-13 09:31:42

其他回答

唯一对我有效的解决办法是最简单的。不需要额外的导入。

<a href="#" onClick={() => this.props.history.goBack()}>Back</a>

Tks, IamMHussain

2020-02-05 19:34:49

import { withRouter } from 'react-router-dom'

this.props.history.goBack();

我正在使用这些版本

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

2018-02-02 11:35:03

使用React钩子

进口:

import { useHistory } from "react-router-dom";

在无状态组件中:

let history = useHistory();

呼叫事件:

history.goBack()

在event Button中使用的例子:

<button onClick={history.goBack}>Back</button>

<button onClick={() => history.goBack()}>Back</button>

2019-11-16 18:50:28

this.context.router.goBack()

无需导航mixin !

2015-11-22 00:38:29

看看我使用React 16.0和React-router v4的工作示例。查看代码Github

使用withRouter和history.goBack()

这就是我正在实现的想法……

History.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'


class History extends Component {

  handleBack = () => {
    this.props.history.goBack()
  }

  handleForward = () => {
    console.log(this.props.history)
    this.props.history.go(+1)
  }

  render() {
    return <div className="container">
      <div className="row d-flex justify-content-between">
        <span onClick={this.handleBack} className="d-flex justify-content-start button">
          <i className="fas fa-arrow-alt-circle-left fa-5x"></i>
        </span>
        <span onClick={this.handleForward} className="d-flex justify-content-end button">
          <i className="fas fa-arrow-alt-circle-right fa-5x"></i>
        </span>
      </div>
    </div>
  }
}

export default withRouter(History)

PageOne.js

import React, { Fragment, Component } from 'react'

class PageOne extends Component {

   componentDidMount(){
      if(this.props.location.state && this.props.location.state.from != '/pageone')
      this.props.history.push({
         pathname: '/pageone',
         state: { 
             from: this.props.location.pathname
         }
       });
   }

   render() {
      return (
         <Fragment>
            <div className="container-fluid">
               <div className="row d-flex justify-content-center">
                  <h2>Page One</h2>
               </div>
            </div>
         </Fragment>
      )
   }
}

export default PageOne

另外，抱歉代码太大，不能全部贴在这里

2018-08-06 21:42:09

如何配置历史记录?

推荐文章

最新文章

标签