react-router quay lại một trang làm cách nào để bạn định cấu hình lịch sử?

Bất cứ ai có thể vui lòng cho tôi biết làm thế nào tôi có thể quay lại trang trước hơn là một tuyến đường cụ thể?

Khi sử dụng mã này:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

Gặp lỗi này, goBack () đã bị bỏ qua vì không có lịch sử bộ định tuyến

Đây là các tuyến đường của tôi:

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

Tôi nghĩ rằng bạn chỉ cần bật BrowserHistory trên router của bạn bằng cách intializing nó như thế: <Router history={new BrowserHistory}>.

Trước đó, bạn nên yêu cầu BrowserHistorytừ'react-router/lib/BrowserHistory'

Tôi hy vọng rằng sẽ giúp!

CẬP NHẬT: ví dụ trong 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);

Cập nhật với React v16 và ReactRouter v4.2.0 (tháng 10 năm 2017):

class BackButton extends Component {
  static contextTypes = {
    router: () => true, // replace with PropTypes.object if you use them
  }

  render() {
    return (
      <button
        className="button icon-left"
        onClick={this.context.router.history.goBack}>
          Back
      </button>
    )
  }
}

Cập nhật với React v15 và ReactRouter v3.0.0 (tháng 8 năm 2016):

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});

Đã tạo một fiddle với ví dụ phức tạp hơn một chút với iframe được nhúng: https://jsfiddle.net/kwg1da3a/

React v14 và ReacRouter v1.0.0 (ngày 10 tháng 9 năm 2015)

Bạn có thể làm được việc này:

var React = require("react");
var Router = require("react-router");

var SomePage = React.createClass({
  ...

  contextTypes: {
    router: React.PropTypes.func
  },
  ...

  handleClose: function () {
    if (Router.History.length > 1) {
      // this will take you back if there is history
      Router.History.back();
    } else {
      // this will take you to the parent route if there is no history,
      // but unfortunately also add it as a new route
      var currentRoutes = this.context.router.getCurrentRoutes();
      var routeName = currentRoutes[currentRoutes.length - 2].name;
      this.context.router.transitionTo(routeName);
    }
  },
  ...

Bạn cần phải cẩn thận rằng bạn có lịch sử cần thiết để quay lại. Nếu bạn nhấn trực tiếp vào trang và sau đó nhấn lại, nó sẽ đưa bạn trở lại lịch sử trình duyệt trước ứng dụng của bạn.

Giải pháp này sẽ xử lý cả hai trường hợp. Tuy nhiên, nó sẽ không xử lý iframe có thể điều hướng trong trang (và thêm vào lịch sử trình duyệt), bằng nút quay lại. Thành thật mà nói, tôi nghĩ rằng đó là một lỗi trong bộ định tuyến phản ứng. Sự cố được tạo tại đây: https://github.com/rackt/react-router/issues/1874

1. nhập khẩu withRouter

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

2. Xuất thành phần của bạn dưới dạng:

   export withRouter(nameofcomponent) 

3. Ví dụ, khi nhấp vào nút, hãy gọi goBack:

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

Đã thử nghiệm trên react-router-domv4.3

this.context.router.goBack()

Không cần kết hợp điều hướng!

Phương pháp ES6 không có bộ trộn sử dụng bộ định tuyến phản ứng, chức năng không trạng thái.

import React from 'react'
import { browserHistory } from 'react-router'

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

Sử dụng React Hooks

Nhập khẩu:

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

Trong thành phần không trạng thái:

  let history = useHistory();

Sự kiện

history.goBack()

Hãy xem ví dụ làm việc của tôi bằng cách sử dụng React 16.0 với React-router v4 Live Example . kiểm tra mã Github

Sử dụng withRoutervàhistory.goBack()

Đây là ý tưởng mà tôi đang thực hiện ...

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

ps xin lỗi mã là quá lớn để đăng tất cả ở đây

Điều này hoạt động với lịch sử Trình duyệt và băm.

this.props.history.goBack();

Đây là một thành phần BackButton đang hoạt động (React 0.14):

var React = require('react');
var Router = require('react-router');

var History = Router.History;

var BackButton = React.createClass({
  mixins: [ History ],
  render: function() {
    return (
      <button className="back" onClick={this.history.goBack}>{this.props.children}</button>
    );
  }
});

module.exports = BackButton;

Tất nhiên, bạn có thể làm điều gì đó như thế này nếu không có lịch sử:

<button className="back" onClick={goBack}>{this.props.children}</button>

function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}

Đối với react-router v2.x, điều này đã thay đổi. Đây là những gì tôi đang làm cho 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
};

Trong react-router v4.x bạn có thể sử dụng history.goBacktương đương với history.go(-1).

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <Back />{/* <----- This is component that will render Back button */}
      </div>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

import React from "react";
import { withRouter } from "react-router-dom";

const Back = ({ history }) => (
  <button onClick={history.goBack}>Back to previous page</button>
);

export default withRouter(Back);

Demo: https://codesandbox.io/s/ywmvp95wpj

Hãy nhớ rằng bằng cách sử dụng historyngười dùng của bạn có thể rời đi vì history.goBack()có thể tải một trang mà khách đã truy cập trước khi mở ứng dụng của bạn.

Để ngăn chặn tình huống như mô tả ở trên, tôi đã tạo một thư viện đơn giản react-router-last-location để theo dõi vị trí cuối cùng của người dùng của bạn.

Cách sử dụng là rất thẳng về phía trước. Trước tiên, bạn cần phải cài đặt react-router-domvà react-router-last-locationtừ npm.

npm install react-router-dom react-router-last-location --save

Sau đó sử dụng LastLocationProvidernhư bên dưới:

App.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { LastLocationProvider } from "react-router-last-location";
//              ↑
//              |
//              |
//
//       Import provider
//
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const App = () => (
  <div style={styles}>
    <h5>Click on About to see your last location</h5>
    <Router>
      <LastLocationProvider>{/* <---- Put provider inside <Router> */}
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />

          <Back />
        </div>
      </LastLocationProvider>
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));

Back.js

import React from "react";
import { Link } from "react-router-dom";
import { withLastLocation } from "react-router-last-location";
//              ↑
//              |
//              |
//
//    `withLastLocation` higher order component
//    will pass `lastLocation` to your component               
//
//                   |
//                   |
//                   ↓
const Back = ({ lastLocation }) => (
  lastLocation && <Link to={lastLocation || '/'}>Back to previous page</Link>
);


//          Remember to wrap
//   your component before exporting
//
//                   |
//                   |
//                   ↓
export default withLastLocation(Back);

Demo: https://codesandbox.io/s/727nqm99jj

Điều hiệu quả với tôi là nhập vớiRouter ở đầu tệp của tôi;

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

Sau đó, sử dụng nó để bọc hàm đã xuất ở cuối tệp của tôi;

export default withRouter(WebSitePageTitleComponent)

Điều đó sau đó cho phép tôi truy cập vào phần hỗ trợ lịch sử của Bộ định tuyến. Đầy đủ mẫu mã bên dưới!

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)

Quay lại trang cụ thể :

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

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

Quay lại trang trước :

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

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

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

this.props.history.goBack();

Tôi đang sử dụng các phiên bản này

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

Giải pháp duy nhất phù hợp với tôi là đơn giản nhất. Không cần nhập khẩu bổ sung.

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

Tks, IamMHussain

Gọi thành phần sau như vậy:

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

Và đây là thành phần:

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

Tôi đang sử dụng:

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

REDUX

Bạn cũng có thể sử dụng react-router-reduxcái nào có goBack()và push().

Đây là một gói lấy mẫu cho điều đó:

Trong điểm vào của ứng dụng, bạn cần ConnectedRoutervà một kết nối đôi khi phức tạp để kết nối là historyđối tượng. Phần mềm trung gian Redux lắng nghe các thay đổi lịch sử:

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root'),
)

Tôi sẽ chỉ cho bạn một cách để kết nối history. Lưu ý cách lịch sử được nhập vào cửa hàng và cũng được xuất dưới dạng một tệp đơn để nó có thể được sử dụng trong điểm nhập của ứng dụng:

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window
  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store

Khối ví dụ trên cho thấy cách tải các trình react-router-reduxtrợ giúp phần mềm trung gian hoàn tất quá trình thiết lập.

Tôi nghĩ rằng phần tiếp theo này là hoàn toàn bổ sung, nhưng tôi sẽ bao gồm nó chỉ trong trường hợp ai đó trong tương lai tìm thấy lợi ích:

import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

export default combineReducers({
  routing, form,
})

Tôi sử dụng routerReducermọi lúc vì nó cho phép tôi buộc tải lại các Thành phần mà thường không do shouldComponentUpdate. Ví dụ rõ ràng là khi bạn có một Thanh điều hướng được cho là cập nhật khi người dùng nhấn một NavLinknút. Nếu bạn đi theo con đường đó, bạn sẽ biết rằng phương pháp kết nối của Redux sử dụng shouldComponentUpdate. Với routerReducer, bạn có thể sử dụng mapStateToPropsđể ánh xạ các thay đổi định tuyến vào Thanh điều hướng và điều này sẽ kích hoạt nó cập nhật khi đối tượng lịch sử thay đổi.

Như thế này:

const mapStateToProps = ({ routing }) => ({ routing })

export default connect(mapStateToProps)(Nav)

Thứ lỗi cho tôi khi tôi thêm một số từ khóa bổ sung cho mọi người: nếu thành phần của bạn không cập nhật đúng cách, hãy điều tra shouldComponentUpdatebằng cách xóa chức năng kết nối và xem liệu nó có khắc phục được sự cố không. Nếu vậy, hãy kéo vào routerReducervà thành phần sẽ cập nhật đúng cách khi URL thay đổi.

Tóm lại, sau khi làm tất cả những điều đó, bạn có thể gọi điện goBack()hoặc push()bất cứ lúc nào bạn muốn!

Hãy thử ngay bây giờ trong một số thành phần ngẫu nhiên:

1. Nhập vào connect()
2. Bạn thậm chí không cần mapStateToPropshoặcmapDispatchToProps
3. Nhập trong goBack và đẩy từ react-router-redux
4. Gọi this.props.dispatch(goBack())
5. Gọi this.props.dispatch(push('/sandwich'))
6. Trải nghiệm cảm xúc tích cực

Nếu bạn cần thêm mẫu, hãy xem: https://www.npmjs.com/package/react-router-redux

Đơn giản chỉ cần sử dụng như thế này

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

Đoạn mã này sẽ giúp bạn.

this.context.router.history.goBack()

React Router v6

useNavigate Hook là cách được đề xuất để quay lại bây giờ:

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

Mẫu hộp mã

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

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

useNavigate thay thế useHistory để hỗ trợ chế độ React Suspense / Concurrent sắp tới tốt hơn.

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

Đối với "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,
};