React Router changes from V2/V3 to V4

React Router V4 almost rewrites V2 / V3, including Router/Route changes, component nested way, Route lifecycle, Swicth and Redirect components. React Router V4 is more component-based than V3. Basically the same idea as React.

Router

In V3, we used the Router with the history attribute

// v3
import routes from './routes'
<Router history={browserHistory} routes={routes} />
// or
<Router history={browserHistory}>
  <Route path='/' component={App}>
    // ...
  </Route>
</Router>
Copy the code

In V4, several different Router components are provided, and each Router component creates a History object.

//v4
<BrowserRouter>
  <div>
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</BrowserRouter>
Copy the code

Multiple components can be rendered within the Router component in V3

// V2 or V3
import { Router, Route, hashHistory } from 'react-router';

<Router history={hashHistory}>
  <Route path='/about' component={About} />
  <Route path='/contact' component={Contact} />
</Router>
Copy the code

In V4, the Router component can render only one component

// yes
<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>

// no
<BrowserRouter>
  <Route path='/about' component={About} />
  <Route path='/contact' component={Contact} />
</BrowserRouter>
Copy the code

Routes

In V3, instead of a component, all you have to do is create a Route configuration object

/// in v3 the element
<Route path='contact' component={Contact} />
// was equivalent to
{
  path: 'contact'.component: Contact
}
Copy the code

In V4, a component is a real component, and when the path matches the current location, it is rendered using rendering prop (Component, render, or children); When path does not match, null is rendered.

Embedded routines by

In v3, are nested by children who have them as their parents

<Route path="parent" component={Parent}>
  <Route path="child" component={Child} />
  <Route path="other" component={Other} />
</Route>
Copy the code

In V4, it can only be rendered by its parent component

<Route path="parent" component={Parent} />;

function Parent() {
  return (
    <div>
      <Route path="child" component={Child} />
      <Route path="other" component={Other} />
    </div>
  );
}
Copy the code

The life cycle of the route

V3 provides onEnter, onUpdate, and onLeaves methods. In V4 we need the lifecycle method. Replace onEnter with componentDidMount, onUpdate with componentDidupdate, and onLeave with componentWillUnmount.

Switch

In V3, we can specify multiple subroutes and only the first one that matches will be rendered

// v3
<Route path="/" component={App}>
  <IndexRoute component={Home} />
  <Route path="about" component={About} />
  <Route path="contact" component={Contact} />
</Route>
Copy the code

V4 provides components that, when a component is rendered, only the first child matching the current location is rendered.

// v4
const App = (a)= > (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Switch>
);
Copy the code

Redirect

In V3, IndexRedirect is used if we need to jump from a path, such as/to /welcome.

// v3
<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
</Route>
Copy the code

In V4, we could use Redirect

// v4
<Route exact path="/" render={() => <Redirect to="/welcome" component={App} />} />

<Switch>
  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Redirect path="*" to="/" />
</Switch>
Copy the code

In V3, Redirect retained the query string

// v3

<Redirect from="/" to="/welcome" />
/ / /? The source = Google - / welcome? source=google
Copy the code

In V4, we need to re-pass these attributes to the TO attribute

// v4

<Redirect from="/" to="/welcome" />
/ / /? Source = Google - > / welcome

<Redirect from="/"to={{ ... location,pathname: "/welcome"}} / >/ / /? The source = Google - / welcome? source=google
Copy the code

Other changes

History. Push and history. The replace

/ V2 or V3
history.push({
    pathname: '/home'.query: {
        foo: 'test'.bar: 'temp'}}); history.replace({pathname: '/home'.query: {
        foo: 'test'.bar: 'temp'}});// V4
history.push({
    pathname: '/home'.search: '? foo=test&bar=temp'}); history.replace({pathname: '/home'.search: '? foo=test&bar=temp'});Copy the code

Optional parameters

In V3, use parentheses to indicate optional path=”/entity/:entityId(/:parentId)”

In v4 by a question mark to indicate the following optional path = “/ entity / : entityId / : parentId?”

props.params

// get params from V2 or V3
this.props.params
Copy the code

// V4
this.props.match.params
Copy the code

Location. query(query string)

V4 has removed location.query and can only be retrieved using search. To make it look like a browser, you can use the query-string library to parse if you want to be compatible with the previous location.query

// query (V2 or V3)
this.props.location.query
Copy the code

// V4 removes location.query and can only be retrieved using search to make it browser-like
// If you want to be compatible with the previous location.query, you can use the query-string library to parse it
/ / such as: the queryString. Parse (props. Location. Search)
this.props.location.search
Copy the code

location.action

// V2 or V3 gets the action for the location
this.props.location.action
Copy the code

// V4 removes location.action and puts it in history
history.action
Copy the code

To obtain the history library

// Get the history library from the react-router.

import {hashHistory as history} from 'react-router';
Copy the code

//V4

import createHashHistory as history from 'history/createHashHistory';
Copy the code

Reference article:

Migrating from v2/v3 to v4

ReactRouter Upgrade V2 to V4