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

This article mainly introduces "what are the new features of React Router V6". In daily operation, I believe many people have doubts about the new features of React Router V6. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what are the new features of React Router V6?" Next, please follow the editor to study!

1. Rename to

The top-level component will be renamed. However, most of its functions remain the same (Hey, messing around).

/ / v5 / / v6

two。 New feature changes of

Component/render is replaced by element

In a word, in short. It just becomes easier to use.

Import Profile from'. / Profile'; / / v5 ()} / > / / V6

3. Nested routing becomes simpler

The specific changes are as follows:

Changed to accept child routes.

Simpler matching rules than and.

The level of the path is clearer.

3.1 simplify the definition of nested routes

Nesting routes in v5 must be very clearly defined and require a lot of string matching logic in these components (long time to see, finally aware of this problem. )

Let's take a look at the previous processing:

/ v5 import {BrowserRouter, Switch, Route, Link, useRouteMatch} from 'react-router-dom'; function App () {return ();} function Profile () {let {path, url} = useRouteMatch () Return (My Profile);}

In V6, you can remove string matching logic. You don't need any useRouteMatch ()!

/ / V6 import {BrowserRouter, Routes, Route, Link, Outlet} from 'react-router-dom'; function App () {return ();} function Profile () {return (My Profile);}

Of course, there are more sour operations, which are defined directly in the route and then use the next new API:Outlet

3.2 New API:Outlet

This thing is very much like {this.props.children}. The specific usage is shown in the following example:

Function App () {return () } function Profile () {return (My Profile {/ * will render or * /} directly based on the different routing parameters defined above)}

More than 3.3

Previously, we could only use one Routes in React App. But now we can use multiple routes in React App, which will help us manage multiple application logic based on different routes.

Import React from 'react'; import {Routes, Route} from' react-router-dom'; function Dashboard () {return (

Look, more routes!

);} function App () {return ();}

4. Replace useHistory with useNavigate

From clear at a glance to blindness.

It always feels like the React Router team has a little bit of a show.

/ / v5 import {useHistory} from 'react-router-dom'; function MyButton () {let history = useHistory (); function handleClick () {history.push (' / home');}; return Submit;}

Now, history.push () will be replaced with navigation ():

/ / V6 import {useNavigate} from 'react-router-dom'; function MyButton () {let navigate = useNavigate (); function handleClick () {navigate (' / home');}; return Submit;}

The usage of history will also be replaced with:

/ / v5 history.push ('/ home'); history.replace ('/ home'); / / V6 navigate ('/ home'); navigate ('/ home', {replace: true})

5. The new hook useRoutes replaces react-router-config.

It feels like another wave of forced hooks, but it is still a little more concise than before.

Function App () {let element = useRoutes ([{path:'/', element:}, {path: 'dashboard', element:}, {path:' invoices', element:, children: [{path:': id', element:}, {path: 'sent', element:}]} / / redirect {path: 'home', redirectTo:' /'}, / / 404No {path:'*', element:}]) Return element;}

6. Size reduction: from 20kb to 8kb

While React Router V6 brings us convenience, it also reduces the size of the bag by more than half.

I feel like I can take a look at the source code.

7. Migration and other important repairs.

The official migration guide is here: React Router V6 migration guide

In fact, the new features listed above are basically the whole content of the migration.

The basic starting style is to update the package:

$npm install react-router@6 react-router-dom@6 # or, for a React Native app $npm install react-router@6 react-router-native@6

One of the things I think needs special attention is that React Router V6 uses a simplified path lattice and only supports two kinds of placeholders: dynamic: id style parameters and * wildcards

The following are valid routing paths in V6:

/ groups/ groups/admin / users/:id/ users/:id/messages / files/* / files/:id/* / files-*

Paths that use RegExp regular matching will not be valid:

/ users/:id? / tweets/:id (\ d +) / files/*/cat.jpg

All path matches in V6 will ignore the tail "/" on the URL. In fact, it has been deleted and is invalid in V6. This does not mean that you do not need to use slashes.

Path before v5, there is routing ambiguity

If the current path is "/ users", it will jump.

If the current path is "/ users/", it will jump.

React Router V6 fixes this ambiguity by removing the tail "/":

If the current path is "/ users", it will jump.

If the current path is "/ users", it will jump.

Its form is more like the use of command line cd:

/ / the current path is / app/dashboard/ command line current path is / app/dashboard cd stats / / pwd is / app/dashboard/stats cd.. / stats / / pwd is / app/stats cd.. /. / stats / / pwd is / stats cd.. / stats / / pwd is / stats here The study on "what are the new features of React Router V6" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.