[reactjs] react-router v4에서 기록을 얻는 방법은 무엇입니까?

Question 1

React-Router v3에서 v4로 마이그레이션하는 데 약간의 문제가 있습니다. v3에서는 어디서든이 작업을 수행 할 수있었습니다.

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

v4에서 어떻게 이것을 달성합니까?

withRouter컴포넌트에있을 때 hoc , 반응 컨텍스트 또는 이벤트 라우터 소품을 사용할 수 있다는 것을 알고 있습니다. 하지만 나에게는 그렇지 않습니다.

v4에서 NavigatingOutsideOfComponents 의 동등성을 찾고 있습니다.

Question 2

history객체 를 내보내는 모듈 만 있으면됩니다 . 그런 다음 프로젝트 전체에서 해당 개체를 가져옵니다.

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

그런 다음 내장 라우터 중 하나를 사용하는 대신 <Router>구성 요소를 사용합니다 .

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')

Question 3

작동합니다!
https://reacttraining.com/react-router/web/api/withRouter

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

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

Question 4

허용 대답 Similiary 당신이 할 수있는 것은 사용하는 것입니다 react및 react-router자체는 당신이 제공하는 history어떤 개체는 다음 파일의 범위와 수출을 할 수 있습니다.

history.js

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

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  constructor(props) {
    super(props)
    globalHistory = props.history; 
  }

  componentDidUpdate() {
    globalHistory = this.props.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

그런 다음 나중에 구성 요소를 가져오고 마운트하여 기록 변수를 초기화합니다.

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

그런 다음 마운트 된 앱에서 가져올 수 있습니다.

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

나는 심지어 그것을하는 npm 패키지 를 만들었습니다 .

Question 5

redux 및 redux-thunk를 사용하는 경우 가장 좋은 솔루션은 react-router-redux를 사용하는 것입니다.

// then, in redux actions for example
import { push } from 'react-router-redux'

dispatch(push('/some/path'))

일부 구성을 수행하려면 문서를 보는 것이 중요합니다.

Question 6

근거로 이 답변 만을 위해 다른 구성 요소에 대한 탐색에 역사 개체를 필요로하는 경우 :

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Question 7

App.js에서

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

 const TheContext = React.createContext(null);

 const App = () => {
   const history = useHistory();

   <TheContext.Provider value={{ history, user }}>

    <Switch>
        <Route exact path="/" render={(props) => <Home {...props} />} />
        <Route
          exact
          path="/sign-up"
          render={(props) => <SignUp {...props} setUser={setUser} />}
        /> ...

그런 다음 하위 구성 요소에서 :

const Welcome = () => {

    const {user, history} = React.useContext(TheContext);
    ....

Question 8

의 특정 사례 react-router에서 using context은 유효한 사례 시나리오입니다. 예 :

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

  render () {
    this.context.router;
  }
}

라우터 컨텍스트를 통해 히스토리 인스턴스에 액세스 할 수 있습니다 (예 : this.context.router.history.