如何配置历史记录?

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

当使用此代码时:

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

其他回答

根据https://reacttraining.com/react-router/web/api/history

对于“react-router-dom”:“^5.1.2”，，

const { history } = this.props;
<Button onClick={history.goBack}>
  Back
</Button>

YourComponent.propTypes = {
  history: PropTypes.shape({
    goBack: PropTypes.func.isRequired,
  }).isRequired,
};

2020-03-31 09:44:31

对于react-router v2。这已经改变了。以下是我为ES6所做的:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';

export default class Header extends React.Component {

  render() {
    return (
      <div id="header">
        <div className="header-left">
          {
            this.props.hasBackButton &&
            <FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
          }
        </div>
        <div>{this.props.title}</div>
      </div>
    )
  }
}

Header.contextTypes = {
  router: React.PropTypes.object
};

Header.defaultProps = {
  hasBackButton: true
};

Header.propTypes = {
  title: React.PropTypes.string
};

2016-05-09 01:12:26

返回指定页面:

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

  const history = useHistory();
  
  const routeChange = () => {
    let path = '/login';
    history.push(path);
  };

返回上一页:

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

  const history = useHistory();
  
  const routeChange = () => {
    history.goBack()
  };

2020-05-16 23:38:33

步骤1

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

步骤2

let history = useHistory();

步骤3

const goToPreviousPath = (e) => {
   e.preventDefault();
   history.goBack()
}

步骤4

<Button
  onClick={goToPreviousPath}
>
  Back
</Button>

2021-06-01 03:05:24

这段代码将为您完成任务。

this.context.router.history.goBack()

2018-10-04 09:06:44

如何配置历史记录?

推荐文章

最新文章

标签