react-router 페이지로 돌아 가기 기록을 어떻게 구성합니까?

누구든지 특정 경로가 아닌 이전 페이지로 돌아가는 방법을 알려주시겠습니까?

이 코드를 사용하는 경우 :

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

다음과 같이 초기화하여 라우터에서 BrowserHistory를 활성화하면됩니다 <Router history={new BrowserHistory}>.

그 전에 다음 BrowserHistory에서 요구해야합니다 .'react-router/lib/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);

React v16 및 ​​ReactRouter v4.2.0으로 업데이트 (2017 년 10 월) :

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

React v15 및 ReactRouter v3.0.0으로 업데이트 (2016 년 8 월) :

var browserHistory = ReactRouter.browserHistory;

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

임베디드 iframe을 사용하여 좀 더 복잡한 예제로 바이올린을 만들었습니다 : https://jsfiddle.net/kwg1da3a/

React v14 및 ReacRouter v1.0.0 (2015 년 9 월 10 일)

다음과 같이 할 수 있습니다.

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

돌아가는 데 필요한 이력이 있는지주의해야합니다. 페이지를 직접 클릭 한 다음 다시 클릭하면 앱 이전의 브라우저 기록으로 돌아갑니다.

이 솔루션은 두 시나리오를 모두 처리합니다. 그러나 뒤로 버튼을 사용하여 페이지 내에서 탐색하고 브라우저 기록에 추가 할 수있는 iframe은 처리하지 않습니다. 솔직히 나는 그것이 react-router의 버그라고 생각합니다. 여기에 생성 된 문제 : https://github.com/rackt/react-router/issues/1874

1. 수입 withRouter

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

2. 구성 요소를 다음과 같이 내 보냅니다.

   export withRouter(nameofcomponent) 

3. 예를 들어 버튼을 클릭하면 다음을 호출합니다 goBack.

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

react-router-domv4.3에서 테스트 됨

this.context.router.goBack()

내비게이션 믹스 인이 필요하지 않습니다!

반응 라우터, 상태 비 저장 기능을 사용하는 믹스 인이없는 ES6 방법.

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

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

React Hooks 사용

수입:

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

상태 비 저장 구성 요소 :

  let history = useHistory();

이벤트

history.goBack()

React-router v4 Live Example 과 함께 React 16.0을 사용한 작업 예제를 확인하십시오 . 코드 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

추신 코드가 여기에 모두 게시하는 것이 큰 죄송합니다.

이것은 브라우저 및 해시 기록과 함께 작동합니다.

this.props.history.goBack();

이것은 작동하는 BackButton 구성 요소 (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;

역사가 없다면 다음과 같이 할 수 있습니다.

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

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

react-router v2.x의 경우 변경되었습니다. 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
};

에서 반응 라우터가 사용할 수있는 4.x 버전 history.goBack에 해당한다 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);

데모 : https://codesandbox.io/s/ywmvp95wpj

방문자가 응용 프로그램을 열기 전에 방문한 페이지를로드 history할 수 있기 때문에 사용자 를 사용 하여 떠날 history.goBack()수 있습니다.

위에서 설명한 상황을 방지하기 위해 사용자의 마지막 위치를 감시 하는 간단한 라이브러리 react-router-last-location 을 만들었습니다 .

사용법은 매우 간단합니다. 먼저 설치해야합니다.react-router-dom 하고 react-router-last-location부터 npm.

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

그런 다음 LastLocationProvider아래와 같이 사용하십시오 .

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

데모 : https://codesandbox.io/s/727nqm99jj

나를 위해 일한 것은 내 파일 맨 위에 withRouter를 가져 오는 것이 었습니다.

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)

특정 페이지로 돌아 가기 :

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

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",

나를 위해 일한 유일한 해결책은 가장 간단했습니다. 추가 수입이 필요하지 않습니다.

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

Tks, IamMHussain

다음과 같이 구성 요소를 호출하십시오.

<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"

리덕스

당신은 또한 사용할 수 react-router-redux있습니다있는 goBack()및 push().

다음은이를위한 샘플러 팩입니다.

앱의 진입 점에는이 필요 ConnectedRouter하며 때로는 연결하기 까다로운 연결이 history객체입니다. Redux 미들웨어는 기록 변경 사항을 수신합니다.

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'),
)

를 연결하는 방법을 보여 드리겠습니다 history. 히스토리를 스토어로 가져오고 앱의 진입 점에서 사용할 수 있도록 싱글 톤으로 내보내는 방법을 확인합니다.

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

위의 예제 블록은 react-router-redux설정 프로세스를 완료하는 미들웨어 헬퍼 를로드하는 방법을 보여줍니다 .

이 다음 부분은 완전히 추가적이라고 생각하지만 미래의 누군가가 혜택을 찾을 경우를 대비하여 포함하겠습니다.

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

export default combineReducers({
  routing, form,
})

routerReducer일반적으로 .NET으로 인해 발생하지 않는 구성 요소를 강제로 다시로드 할 수 있기 때문에 항상 사용 합니다 shouldComponentUpdate. 명백한 예는 사용자가 NavLink버튼을 누를 때 업데이트되어야하는 Nav Bar가있는 경우 입니다. 그 길을 따라 가면 Redux의 연결 방법이 shouldComponentUpdate. 을 사용 routerReducer하면을 사용 mapStateToProps하여 경로 변경 사항을 탐색 모음에 매핑 할 수 있으며이 기능은 기록 객체가 변경 될 때 업데이트되도록 트리거합니다.

이렇게 :

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

export default connect(mapStateToProps)(Nav)

사람들을 위해 추가 키워드를 추가하는 동안 용서하십시오. 구성 요소가 제대로 업데이트되지 않으면 shouldComponentUpdate연결 기능을 제거하여 조사 하고 문제가 해결되는지 확인하십시오. 그렇다면을 가져 routerReducer오면 URL이 변경 될 때 구성 요소가 제대로 업데이트됩니다.

끝으로, 모든 것을 수행 한 후, 당신은 호출 할 수 있습니다 goBack()또는 push()언제든지 당신이 원하는!

임의의 구성 요소에서 지금 시도하십시오.

1. 가져 오기 connect()
2. 당신도 필요하지 않습니다 mapStateToProps또는mapDispatchToProps
3. goBack에서 가져 오기 및 푸시 react-router-redux
4. 요구 this.props.dispatch(goBack())
5. 요구 this.props.dispatch(push('/sandwich'))
6. 긍정적 인 감정을 경험하십시오

더 많은 샘플링이 필요하면 https://www.npmjs.com/package/react-router-redux를 확인 하십시오.

이렇게 사용하면됩니다

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

이 코드는 당신을 위해 트릭을 할 것입니다.

this.context.router.history.goBack()

React Router 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 샘플

<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 을 대체이 useHistory 하는 지원 곧이 서스펜스 / 동시 모드 더 반응한다.

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