- Overview
- Bundles
- Routers
- Suspense
- Outlet
- Conclude
1. Overview
React route is a route router to your pages, helping to synchronize the appearance and urls of your web pages. Currently React route has released V6 betas, with changes and improvements we will find out.
2. Bundles
With version 6, the size is 62% smaller, making your package download speed significantly faster. With version 6 download speed is 5ms with 4G and 80ms for 3G compared to its predecessor package v5, 11ms with 4G and 190ms with 3G.
- This is help for package size.
- Not supported for versions older than IE11
- Does not support React with version less than 16.8
- Using Google Closure Compiler
And now let’s take a look at some of the upgraded APIs in this V6.
3. Routers
Instead of using <Switch></Switch> then use <Route path=”…”/> In V5 you have to create a parent Route and from the parent Route wrap the child Route. To Link to the child Route in the menu, you must match the parent Route and connect the child Route.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | javascript // React Router v5 import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom'; function App() { return ( <BrowserRouter> <Switch> <Route exact path="/"><Home /></Route> <Route path="/users"><Users /></Route> </Switch> </BrowserRouter> ); } function Users() { // In v5, nested routes are rendered by the child component, so // you have <Switch> elements all over your app for nested UI. // You build nested routes and links using match.url and match.path. let match = useRouteMatch(); return ( <div> <nav> <Link to={`${match.url}/me`}>My Profile</Link> </nav> <Switch> <Route path={`${match.path}/me`}><OwnUserProfile /></Route> <Route path={`${match.path}/:id`}><UserProfile /></Route> </Switch> </div> ); } |
In V6 Route and Link automatically connect to its parent Routes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | javascript import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="users" element={<Users />}> <Route path="/" element={<UsersIndex />} /> <Route path=":id" element={<UserProfile />} /> <Route path="me" element={<OwnUserProfile />} /> </Route> </Routes> </BrowserRouter> ); } function Users() { return ( <div> <nav> <Link to="me">My Profile</Link> </nav> <Outlet /> </div> ); } |
4. Suspense
Instead of accessing history to navigate the route, V6 provides useNavigate(), which is very useful after you perform an action such as submit login.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | javascript import React from 'react'; import { useNavigate } from 'react-router-dom'; function App() { let navigate = useNavigate(); let [error, setError] = React.useState(null); async function handleSubmit(event) { event.preventDefault(); let result = await submitForm(event.target); if (result.error) { setError(result.error); } else { navigate('success'); } } return ( <form onSubmit={handleSubmit}> // ... </form> ); } |
5. Outlet
Outlet is like props children, it will find components of child Route and put it in its place.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | javascript function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="profile" element={<Profile />}> <Route path=":id" element={<MyProfile />} /> <Route path="me" element={<OthersProfile />} /> </Route> </Routes> </BrowserRouter> ); } function Profile() { return ( <div> <nav> <Link to="me">My Profile</Link> </nav> <Outlet /> </div> ) } |
Depending on the url, <Outlet/> in Profile component will show component of MyProfile or OthersProfile
6. Conclude
So, I have learned briefly about React router V6. With significant improvements in package size as well as advanced features, are you looking forward to this V6 version? Finally, I wish you all a productive day.