How to use history to control routing in react-router (detailed tutorial)

This article mainly introduces you to the relevant information about how react-router v4 uses history to control routing jumps. The article introduces it in detail through sample code, which has certain reference learning value for everyone's study or work. Friends who need it, please follow me and learn together.

Preface

It has been a long time since React Router v4 was officially released. This week I upgraded a React shelf. The previous The router is still using version v2.7.0, so I decided to upgrade the router as well, just in time to "try something new"...

There are rumors in the world that the official currently maintains both versions 2.x and 4.x. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞHey, at this moment, I believe that you who are as smart as me will also find out, where has ReactRouter v3 gone? Lost it all?? Bala is out of trouble??? Dare you give me a perfect one? Explanation!?) In fact, version 3.x does not introduce any new features compared to version 2.x, it just removes the warnings of some obsolete APIs in version 2.x. According to the plan, when new projects without historical baggage want to use the stable version of ReactRouter, they should use ReactRouter 3.x. The 3.x version is currently still in the beta stage, but will be officially released before the 4.x version. If you are already using version 2.x, upgrading to 3.x will not require any additional code changes.

Problem

When we use react-router v3, we want to jump the path, we usually handle it like this

• We export browserHistory from react-router.

• We use browserHistory.push() and other methods to operate routing jumps.

Similar to the following

import browserHistory from 'react-router';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
 .then(response => {
 browserHistory.push('/cart'); //这里
 });
}

but!! Here comes the problem, in react-router v4, export of browserHistory, etc. is not provided~~

What to do? How do I control routing jumps? ? ?

Solution

#1. Use withRouter

withRouter high-order component, which provides history Let you use~

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

class MyComponent extends React.Component {
 ...
 myFunction() {
 this.props.history.push("/some/Path");
 }
 ...
}
export default withRouter(MyComponent);

This is the official recommended method. But this method is a bit uncomfortable to use. For example, when we want to use routing in redux, we can only pass the history in the component. .

Just like the code in the question chapter, we must pass a history parameter from the component. . .

2. Using Context

react-router v4 exposes a router object through Contex in the Router component~

Use Context in sub-components , we can get the router object, as in the following example~

import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
 static contextTypes = {
 router: PropTypes.object
 }
 constructor(props, context) {
 super(props, context);
 }
 ...
 myFunction() {
 this.context.router.history.push("/some/Path");
 }
 ...
}

Of course, use this method with caution~try not to use it. Because react does not recommend using context. It may be abandoned in future versions.

3. hack

In fact, the analysis problem is that the history we passed to the Router component in v3 was exposed again, allowing us to call~~

The component BrowserRouter of react-router v4 creates its own history, and it is not exposed and cannot be referenced by us. Embarrassing~

We can not use the recommended BrowserRouter and still use the Router component. We create the history ourselves, and other places call the history we created. Look at the code~

We create a history ourselves

// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();

We use the Router component

// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
 <Provider store={store}>
 <Router history={history}>
  ...
 </Router>
 </Provider>,
 document.getElementById(&#39;root&#39;),
);

We can use it in other places

import history from './history';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
  .then(response => {
  history.push('/cart'); //这里
  });
}

4. I insist on using BrowserRouter

Indeed, react-router v4 recommends using the BrowserRouter component, but in the third solution, we abandoned this component and fell back to using the Router component.

what to do. If you go take a look at the source code of BrowserRouter, I think you will suddenly understand.

The source code is very simple, nothing much. We write a BrowserRouter component entirely by ourselves, and then replace the Router component in the third solution. hey-hey.

This ends here. I am currently using the third method. Although the first method is officially recommended, I think it is more troublesome to use. ~

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing the MVVM framework in js (detailed tutorial)

How does requireJS implement a module loader?

Taobao-like JSsearch search (detailed tutorial)

What are the differences between on and click in jquery?

What are the methods of Angular 2 style binding

The above is the detailed content of How to use history to control routing in react-router (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!