What’s new in React Router v6
React router is a very huge library to implement routing in React. Today we’ll talk about the new features of the React Router v6. Right now, it’s in beta. We’ll also compare all the features with the older version of the React Router version 6.
The complete guide of Routing in ReactJS
- Routing in React JS
- URL Parameters with React Router
- Nested Routes in React JS
- Multiple parameters with React Router
- What’s new in React Router version 6 (You are here…)
Install React Router v6
1 | npm install react-router@next react-router-dom@next |
What’s new in React Router v6
- Reduced the bundle size
- Introduced <Routes> instead of <Switch>
- Changed the props of the <Route />
- Removed exact and strict props
- Omit the “/” for the relative paths and links
- Changed the structure of the Nested Routes
- Use useNavigate Instead of useHistory
1. Reduced the bundle size
The bundle size of the react router v5 was 28.9 kB whereas the new version 6 is only 12.2 kB. So we can say bundle size decreased by more than 50%.
The above comparison has been done by using BundlePhobia tool.
2. Introduced <Routes> instead of <Switch>
With the new version, You will not be able to use <Switch> but instead of that we have <Routes> in v6.
v5
1 2 3 4 5 6 7 8 9 10 11 12 | import { BrowserRouter, Switch } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Switch> ... ... </Switch> </BrowserRouter> ); } |
v6
1 2 3 4 5 6 7 8 9 10 11 12 | import { BrowserRouter, Routes } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Routes> ... ... </Routes> </BrowserRouter> ); } |
3. Changed the props of the <Route />
The structure has been changed in version 6. Instead of component now we have to use the element to load the component and it’s very easy to pass the external props directly to the component.
v5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Switch> <Route exact path="/" component={Dashboard} /> <Route path="/profile" render={props => ( <Profile props={props} role="ADMIN" /> )} /> </Switch> </BrowserRouter> ); } |
v6
1 2 3 4 5 6 7 8 9 10 11 12 | import { BrowserRouter, Routes, Route } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/profile" element={<Profile role="ADMIN" />} /> </Routes> </BrowserRouter> ); } |
4. Removed exact and strict props
All the routes basically match exactly in the v6 so exact and strict props are removed from the new version.
v5
1 | <Route exact path="/" component={Dashboard} /> |
v6
1 | <Route path="/" element={<Dashboard />} /> |
5. Omit the “/” for the relative paths and links
In the v6, we can omit the / char from the paths and links, if both are relative to their parent route.
Example of the <Link />
v5
1 | <Link to="/profile">Profile</Link> |
v6
1 | <Link to="profile">Profile</Link> |
Example of the <Route />
v5
1 2 3 4 5 6 | <Route exact path="/" component={Dashboard} /> <Route path="/profile" render={props => ( <Profile props={props} role="ADMIN" /> )} /> |
v6
1 2 | <Route path="/" element={<Dashboard />} /> <Route path="profile" element={<Profile role="ADMIN" />} /> |
6. Changed the structure of the Nested Routes
The nested routes are easier with v6 where we have to wrap the child routes with a parent route. The <Outlet /> component is introduced to manage the children routes in the react router version 6.
v5
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 | import { BrowserRouter, Switch, Route, useRouteMatch } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Switch> <Route exact path="/" component={Dashboard} /> <Route path="/profile" render={props => ( <Profile props={props} role="ADMIN" /> )} /> </Switch> </BrowserRouter> ); } const Profile = () => { const { path } = useRouteMatch(); return ( <div> ... ... <Switch> <Route path={`${path}/:id`} component={MemberInfo} /> <Route path={`${path}/member`} component={MemberProfile} /> </Switch> </div> ); } |
v6
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 | import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom'; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="profile" element={<Profile role="ADMIN" />}> <Route path=":id" element={<MemberInfo />} /> <Route path="member" element={<MemberProfile />} /> </Route> </Routes> </BrowserRouter> ); } const Profile = () => { return ( <div> ... ... <Outlet /> </div> ); } |
7. Use useNavigate Instead of useHistory
Now the useHistory hook is replaced with the useNavigate hook in the new version of the react router.
v5
1 2 3 4 5 6 7 8 9 10 11 | import { useHistory } from 'react-router-dom'; const App = () => { const history = useHistory(); const handleSubmit = () => { history.push('/profile'); } return <button onClick={handleSubmit}>Submit</button> } |
v6
1 2 3 4 5 6 7 8 9 10 11 | import { useNavigate } from 'react-router-dom'; const App = () => { const navigate = useNavigate(); const handleSubmit = () => { navigate('/profile'); } return <button onClick={handleSubmit}>Submit</button> } |
If you want to use the history.replace in the v6 then the following command will be used.
v5
1 2 | history.push('/profile'); history.replace('/profile'); |
v6
1 2 | navigate('/profile'); navigate('/profile', { replace: true }); |
That’s it for today. Hope you like it.
Thank you for reading. Happy Coding..!!
