如何配置历史记录?

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

当使用此代码时:

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-router v6中，当你想返回到前一页时，你可以使用useNavigate:

步骤1:

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

步骤2:

const navigate = useNavigate();

第三步:如果你想回到前一页，使用navigate(-1):

<button onClick={() => navigate(-1)}> Back </button>

2022-08-30 07:27:35

其他回答

React路由器使用HTML5 History API，它建立在浏览器历史API的基础上，提供了一个我们可以在React应用程序中轻松使用的接口。历史API。所以不需要导入任何东西(useHistory等)

对于功能组件:

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

对于类组件:

<button onClick={()=>{ this.window.history.back() }}> Back </button>

2021-05-12 14:31:02

像这样调用下面的组件:

<BackButton history={this.props.history} />

这是组件:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
  constructor() {
    super(...arguments)

    this.goBack = this.goBack.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.goBack}>
          Back
      </button>
    )
  }

  goBack() {
    this.props.history.goBack()
  }
}

BackButton.propTypes = {
  history: PropTypes.object,
}

export default BackButton

我用的是:

"react": "15.6.1"
"react-router": "4.2.0"

2017-11-28 15:06:32

对我有用的是在我的文件顶部导入使用throuter;

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

然后用它来包装导出的函数在我的文件底部;

export default withRouter(WebSitePageTitleComponent)

然后允许我访问路由器的历史道具。完整的示例代码如下!

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'

class TestComponent extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    event.preventDefault()
    this.props.history.goBack()
  }

  render() {
    return (
      <div className="page-title">
        <a className="container" href="/location" onClick={this.handleClick}>
          <h1 className="page-header">
            { this.props.title }
          </h1>
        </a>
      </div>
    )
  }
}

const { string, object } = PropTypes

TestComponent.propTypes = {
  title: string.isRequired,
  history: object
}

export default withRouter(TestComponent)

2018-11-01 18:26:17

进口withRouter import {withRouter} from 'react-router-dom'; 导出你的组件为: 导出withRouter (nameofcomponent) 例如，在按钮单击时，调用goBack: 回<按钮onClick = {this.props.history.goBack} > < / >按钮

在react-router-dom v4.3上测试

2018-03-06 11:53:48

我认为你只需要在路由器上启用BrowserHistory，初始化如下:< router history={new BrowserHistory}>。

在此之前，你应该从'react-router/lib/BrowserHistory'中获取BrowserHistory

下面是一个使用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);

2015-06-19 13:05:48

如何配置历史记录?

推荐文章

最新文章

标签