Làm thế nào để lấy lịch sử trên react-router v4?

Tôi gặp một số vấn đề nhỏ khi di chuyển từ React-Router v3 sang v4. trong v3, tôi có thể thực hiện việc này ở bất cứ đâu:

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

Làm cách nào để đạt được điều này trong v4.

Tôi biết rằng tôi có thể sử dụng các withRouterđạo cụ bộ định tuyến sự kiện, ngữ cảnh hoc , hoặc sự kiện khi bạn ở trong một Thành phần. nhưng nó không phải là trường hợp của tôi.

Tôi đang tìm kiếm sự tương đương của NavigationOutsideOfComponents trong v4

Bạn chỉ cần có một mô-đun xuất một historyđối tượng. Sau đó, bạn sẽ nhập đối tượng đó trong suốt dự án của mình.

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

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

Sau đó, thay vì sử dụng một trong các bộ định tuyến tích hợp, bạn sẽ sử dụng <Router>thành phần này.

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

Những công việc này! 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);

Mô phỏng để trả lời được chấp nhận những gì bạn có thể làm là sử dụng reactvà react-routerchính nó để cung cấp cho bạnhistory đối tượng mà bạn có thể phân bổ trong một tệp và sau đó xuất.

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

Sau đó, bạn nhập Thành phần và gắn kết để khởi tạo biến lịch sử:

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

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

Và sau đó, bạn chỉ có thể nhập vào ứng dụng của mình khi nó đã được gắn kết:

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

Tôi thậm chí đã thực hiện và gói npm làm được điều đó.

Nếu bạn đang sử dụng redux và redux-thunk, giải pháp tốt nhất sẽ là sử dụng react-router-redux

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

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

Điều quan trọng là phải xem tài liệu để thực hiện một số cấu hình.

Dựa trên câu trả lời này nếu bạn chỉ cần đối tượng lịch sử để điều hướng đến thành phần khác:

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

Trong 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} />}
        /> ...

Sau đó, trong một thành phần con:

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

Trong trường hợp cụ thể của react-router, việc sử dụng contextlà một trường hợp hợp lệ, ví dụ:

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

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

Bạn có thể truy cập một phiên bản của lịch sử thông qua bối cảnh bộ định tuyến, ví dụ this.context.router.history.