如何配置历史记录?

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

当使用此代码时:

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

第一步:你需要从react-router-dom中导入Link

import { Link } from 'react-router-dom';

第二步:像这样用Link包裹按钮。它工作得很完美。

<Link to='..'>
  <Button type='button'>Go Back</Button>
</Link>

2022-12-08 20:52:59

其他回答

像这样简单地使用

<span onClick={() => this.props.history.goBack()}>Back</span>

2018-07-07 08:08:37

步骤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

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路由器v6

useNavigate Hook是现在返回的推荐方式:

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

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
      <button onClick={() => navigate(1)}>go forward</button>
    </>
  );
}

Codesandbox样本

Go back/forward multiple history stack entries:

<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>

Go to specific route:

navigate("users") // go to users route, like history.push
navigate("users", { replace: true }) // go to users route, like history.replace
navigate("users", { state }) // go to users route, pass some state in

usenavate取代了useHistory以更好地支持即将到来的React悬疑/并发模式。

2020-06-12 09:06:25

根据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

如何配置历史记录?

推荐文章

最新文章

标签