Shulou(Shulou.com)06/03 Report--

ReactRouterv4 for the first time to pay attention to what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

It has been three months since the official release of React Router v4, and this week I upgraded a React shelf. The previous route was still v2.7.0, so I decided to upgrade the route, just to have a try.

According to rumors, officials are currently maintaining both 2.x and 4.x versions. Why, if you believe in wit like me now, you will also find out, where is ReactRouter v3? Lost the whole thing? Barra is out of the pot? Dare you give me a perfect explanation? In fact, version 3.x doesn't introduce any new features compared to version 2.x, just removes some of the warning of obsolete API in version 2.x. According to the plan, new projects without historical baggage should use ReactRouter 3.x when they want to use a stable version of ReactRouter. Version 3.x is still in the beta phase, but will be released before the 4.x version. If you are already using the 2.x version, there will be no additional code changes to upgrade 3.x.

Under the courtesy introduction

React Router V4 has a fundamental change compared with the previous three versions, the first is to follow the API design concept of Just Component, and secondly, the API aspect has also been streamlined a lot, making it easier for beginners to learn, but if it is the refactoring of the previous project, well, there is nothing to say. The main features of this upgrade are as follows:

Declarative (Declarative)

Combinable Composability

React Router V4 follows the philosophy of React: everything is a component. Therefore, after the upgrade, Route, Link, Switch and so on are all common components.

React Router V4 manages multiple Repository based on Lerna. The code base includes:

React-router React Router core

React-router-dom React Router for DOM binding

React-router-native for React Router for React Native

Integration of react-router-redux React Router and Redux

React-router-config static Route configuration help Assistant

Plug-in was first introduced

Usually in the use of React, we usually introduce two packages, react and react-dom, so should both react-router and react-router-dom be referenced? Attention, high energy ahead, the first hole in the entry is right here. The two of them only need to reference one, but the difference is that the latter has more DOM-like components than the former. So we just need to refer to the package react-router-dom and OK. Of course, if you go with redux, you also need to use react-router-redux.

Introduction to main components

In API versions prior to 4.0, the children of components can only be various components provided by React Router, such as, and so on. In React Router 4, you can put various components and tags into components, and its role is more like that of Redux. * * the difference is that it is used to keep updated with store, but to keep synchronized with location. * * examples are as follows:

/ / example 1 the home page about the list of topics

Router is the underlying interface shared by all routing components. In general, our applications do not use this interface, but use advanced routing:

Use history API provided by HTML5 to keep UI and URL synchronized

Use URL's hash (for example: _ window.location.hash) to keep UI and URL synchronized

Can keep the history of your "URL" in memory (without reading or writing to the address bar)

Provide routing support for using React Native

Never change the address

TIPS: it can be regarded as the second pit. Unlike the previous Router, only one child element is allowed under the component. If there are more than one element, an error will be reported.

Here are the examples of the opposite:

Home page about the list of topics

Yes, example 2 will report the following exception message without the protection of your father:

We know that the main purpose of the Route component is to render some UI when a location matches a routed path. Examples are as follows:

/ / if the address of the application is /, the corresponding UI will look like this: / / if the address of the application is / news, then the corresponding UI will look like this:

The component has the following properties:

Path (string): the route matches the path. (Route without the path attribute always matches)

Exact (bool): when true, the path and location.pathname must match exactly

Strict (bool): in true, a path with a slash can only match a location.pathname with a slash

Here are two vivid examples again:

Exact configuration:

Whether the path location.pathnameexact matches / one/one/twotrue No / one/one/twofalse Yes

Strict configuration:

Does the path location.pathnamestrict match / one//onetrue No / one//one/true Yes / one//one/twotrue Yes

At the same time, the new version of routing provides three ways to render content:

When the address matches, the components of the React will be rendered, and the route props will be rendered along with it

This approach is particularly convenient for inline rendering and wrapper components without causing unexpected remounts

Works in much the same way as the render property, except that it is called regardless of whether the address matches or not

There is nothing to say about the first way, as before, let's focus on the rendering method:

/ / sample Home for inline rendering / > / wrapping / compositing const FadingRoute = ({component: Component,... rest}) = > (()} / >)

TIPS: pit three! Is higher than, so do not use both properties in the same.

Not much different from the previous version, focus on the component properties:

To (string/object): the path or address to jump to

Replace (bool): if it is true, the original address in the access history will be replaced with the new address after clicking the link; when it is false, a new record will be added based on the original access history after clicking the link. Default is false

Examples are as follows:

/ / Link component example / / to is string about / / to is obj// replace

Yes, a specific version will add style parameters and component attributes to the rendered elements when matching the current URL:

ActiveClassName (string): sets the selected style. The default is active.

ActiveStyle (object): adds a style to an element when it is selected

Exact (bool): when true, it will be applied only if the address exactly matches class and style

Strict (bool): when true, the slash after the location URL is taken into account when determining whether the location matches the current pathname; isActive (func): the function of additional logic to determine whether a link is active

We can also see from here that the new version of routing has done a lot of work on componentization. Let's take a look at the example of using NavLink:

/ / activeClassName when selected style is selectedFAQs//, when selected style is activeStyle style setting FAQs// when event id is odd, activate the link const oddEvent = (match, location) > {if (! match) {return false} const eventID = parseInt (match.params.eventID) return! isNaN (eventID) & & eventID% 2 = 1} Event 123

This component is used to render the first OR that matches the address. So how is it different from using a bunch of route?

What makes it unique is that it only renders a route. On the contrary, each containing a matching address (location) is rendered. Consider the following code:

If the current URL is / about, then, and all will be rendered because they all match the path. This design allows us to combine multiple applications into our applications in a variety of ways, such as sidebars, breadcrumbs, bootstrap tabs, etc. However, occasionally we just want to choose one to render. If we were at / about, we wouldn't want to match /: user (or display our "404" page). The following is done using the Switch approach:

Now, if we are at / about, we will start looking for a match. Will be matched, will stop looking for a match and render. Again, if we were in / michael, we would be rendered.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.