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

This article mainly introduces the relevant knowledge of how to use the routing changes caused by the update of the React-Router6 version, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use the routing changes caused by the update of the React-Router6 version. Let's take a look.

React Router should be the most popular library in the React ecosystem. NPM has 600 weekly downloads, GitHub and 45.2k GitHub, which shows that it is a very good library. As an important library of the React community, it has undergone many iterations and major changes. Just last month, it ushered in a large official version update 6.x, currently 6.0.2, which has made a big change compared to the previous 5.x version. There has been a significant improvement in both usage and performance, and this article will also use the way of comparing the new and old versions so that you can start new usage as quickly as possible.

Without saying much, list the changes made by 6.0:

Usage change

Replace with

Nesting routing new writing method

Launch a new hook, fully embracing function components

Object-based routing to enable js to configure all routes

The overall code is about 70% less than the previous version.

Usage change

The component has changed a lot, removing the component and render attributes and replacing them with the element attribute, because it is not compatible with the previous version of the code, and the difference is as follows

/ / 5.x usage} / > / 6.x usage replaced by

V6 version removes components and uses replacements, which not only can replace the functions of components, but also make some changes, such as all must be wrapped in, otherwise an error is thrown

/ / 5.x usage / / 6.x usage nested routing

V6 version of react-router supports a variety of nesting route writing methods, which are written as follows:

The first way of writing: continue the v5 version, keep the original component structure, this method is more suitable for refactoring projects, do not need to change too much code to transition to the V6 version

/ / App.jsx / / User.jsx

Although the component structure is one to the v5 version, there are some differences in writing. The path attribute in the parent component App.jsx must finally use an asterisk (path= "/ user/*"), and the paths in the child component User.jsx are relative to its parent path, so you don't need to write the entire path like the v5 version, and my mother no longer has to worry about me writing the wrong address.

In addition, if the path attribute in does not start with /, it is relative to its parent path, which has the advantage of making the implementation of nested routing easier and easier to combine complex routes and layouts

The second way of writing: write all of them together to realize the display of routing components.

/ / App.jsx / / User.jsx

This way of writing allows us to understand the routing structure more clearly, to better manage our routes, and to lay out the nested routing components to the desired location more accurately.

The third way to write: use useRoutes () to implement routing configuration

Using useRoutes to configure routing has the same effect as configuring routing, but this way of writing uses javascript to generate routes, does it not rely on JSX and returns the routing component tree of the corresponding structure? does it feel like going back to VueRouter? Are there any?

Function App () {/ / the following is the same as the second one: const element = useRoutes ([{path:'/home',element:}, {path:'/user', element:, children: [{path:'profile',element:}, {path:':/id') Element:},]}]) return element}

Each of the above three methods has its own advantages. Developers can choose one according to their own needs to implement your nested routing.

Redirect

The new version of react-router removes components, but you can use new components to work with components to achieve redirection.

Route hopping

Page redirection is inevitable after the routing is configured, but the new version of react-router removes the history object, so the v5 version of history (including useHistory hook) can no longer be used. We can use the following two ways to jump

The way to use or jump is hardly different from the previous version, the only difference is that the highlighting of the component has changed.

/ / v5 homepage / / V6 version (isActive? {color:'#f00'}: {})} > homepage isActive?'current':''} > homepage

PS: there is already a highlighted active class by default, which can be used directly without additional configuration.

Using useNavigate () to jump sometimes we cannot use the above two components to jump. For example, if we jump to different pages according to the value returned by the ajax request, then we have to use js to jump the line. Although the new version of react-router has removed the history object, it provides us with useNavigate hook to achieve routing jump, using the following methods

Import {useNavigate} from "react-router-dom"; let navigate = useNavigate (); navigate (`/ home`); / / jump and do not keep browsing history navigate (` / home`, {replace:true}); / / return the previous page navigate (- 1) / / object jump navigate ({pathname:'/home'})

It should be noted that in the V6 version of react-router, if the jump path does not start with /, it is a relative path, and this setting gives us better control over the jump than its parent routing path.

Routing parameters

As we all know, when performing a route jump, some parameters can be passed to the jump page. The new version of react-router has removed history, location, match and withRouter high-level components from props, so it is impossible to use the old version to transmit and participate in receiving. The new version is used as follows.

Search passes parameters let navigate = useNavigate (); navigate (`/ home?page=1&size= 10`); navigate ({pathname:'/home', search:'page=1&size=10'})

It is also very simple to receive parameters in the corresponding component. Use useSearchParams hook to receive the data composed of the URLSearchParams object and the function that sets the search parameters.

Function Home () {const [searchParams,setSearchParams] = useSearchParams () searchParams.get ('page'); / / 1 searchParams.get (' size'); / / 10 return (Home)} dynamic routing parameters

After configuring the route above, when the page jumps to the path / user/123, you can use useParams hook in the component to get the id of 123s.

Function UserDetail () {const {id} = useParams () return (id: {id})}

When state passes parameters to jump through, or useNavigate, you can pass state parameters as follows:

Home navigate ('/ home', {state: {idx:1,key:'qf'}})

Get the state value through useLocation hook in the home component

Function Home () {const {state} = useLocation (); state.idx; / / 1 state.key; / / qf return (home page)} this is the end of the article on "how to use routing changes caused by React-Router6 version updates". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use the routing changes caused by the update of the React-Router6 version". If you want to learn more, you are welcome to follow the industry information channel.

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.