React-router v4,

React-router v4,

Preface

It has been a long time since React Router v4 was officially released. This week, a React shelf was upgraded, and the previous route was still in v2.7.0, so I decided to upgrade the route, just to "Try it "...

It is rumored that both 2.x and 4.x versions are officially maintained at the same time. I believe that wit, like me, will you also find that ReactRouter v3 is where? All lost ?? Bala's out of the box ??? Dare not give me a perfect explanation !?) In fact, compared with 2.x, 3.x does not introduce any new features, but only removes the warning of some obsolete APIs in version 2.x. As planned, ReactRouter 3.xshould be used when a stable version of ReactRouter is to be used for new projects without historical burdens. At present, 3.x is still in beta stage, but will be officially released before 4.x. If you are using version 2.x, upgrade 3.x without any additional code changes.

Problem

When we use react-router v3, we want to jump to the path. We generally do this.

• We export browserHistory from react-router.
• We usebrowserHistory.push()And so on.

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

But !! This is a problem. In react-router v4, exporting browserHistory and so on is not provided ~~

What should we do? How can I control route jumps ???

Solution

1. Use withRouter

The withRouter advanced component provides history for you to 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 an official recommendation. However, this method is a little uncomfortable. For example, when we want to use routing in redux, we can only pass history in the component ..

Like the code in the problem section, we must pass a history parameter from the component...

2. Use Context

React-router v4 exposes a Router object through Contex In the router component ~

Using Context in child components, we can obtain the router object, as shown 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, this method should be used with caution ~ Try not to use it. Because contex is not recommended for react. It may be discarded in future versions.

3. hack

In fact, the problem is solved by exposing the history that we passed to the Router component in v3, so that we can call ~~

BrowserRouter, a component of react-router v4, creates the history and does not expose the information. Embarrassed ~

We can still use the Router component without using the recommended BrowserRouter. We create history by ourselves, and call the history created by ourselves elsewhere. View code ~

Create a history

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

We use the Router component

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

We can use it elsewhere.

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

4. I have to use BrowserRouter.

Indeed, the BrowserRouter component is recommended for react-router v4. In the third solution, we discard this component and use the Router component again.

What to do. Let's look at the source code of BrowserRouter. I think you are very open.

The source code is very simple and there is nothing. We completely write a BrowserRouter component, and then replace the Router component in the third solution. Hey.

This is also the end. I am currently using the third method. Although the first method is officially recommended, I think it is quite troublesome to use it .~

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.