What’s new in React Router v6
As you already know there is two most used Router packages for React one is Reach Router and another is React Router.
React Router and Reach Router will be merged together and React Router is going to be the new Single source of truth.
Installation of React Router v6
Run the below command to install React Router v6 in your project.
npm install [email protected] [email protected]
Read Also: React Router: Add the Power of Navigation
Size decreased by the 70%
The biggest thing we can notice is that the new version is going to have smaller bundle size as compare to the previous version i.e 5.1.
The 5.1 version have the size of 9.4kb but new React Route v6 gonna have size only 2.9kb.
Nested Routing
Thanks to React Router v6 now we can easily use nested routing. Previously making a nested routing is big mess and complex process to mange it. We usually need to add manual code in our component to handle diff nested routing.
is relative now because of nesting.
Now instead of component prop we can use element prop in Route component.
function App() {
return (
<Routes>
<Route path="invoices" element={<Invoices />}>
<Route path=":invoiceId" element={<IndividualInvoice />} />
<Route path="sent" element={<SentInvoices />} />
</Route>
</Routes>
);
}
Read Also: Getting started with React Router
Relative Links
Same as <Route path>, <Link to> is also relative to the route’s hierarchy. If you omit the beginning /, it becomes relative to the route path that it sits in.
import { Routes, Route, Link, Outlet } from 'react-router-dom';
function Home() {
return <h1>Home</h1>;
}
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<nav>
<Link to="invoices">Invoices</Link>{" "}
<Link to="team">Team</Link>
</nav>
<hr />
<Outlet />
</div>
);
}
function Invoices() {
return <h1>Invoices</h1>;
}
function Team() {
return <h1>Team</h1>;
}
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="dashboard" element={<Dashboard />}>
<Route path="invoices" element={<Invoices />} />
<Route path="team" element={<Team />} />
</Route>
</Routes>
);
}
Read Also: Learn React.js - Full Course for Beginners
Multiple Routes
Previously we can use only Routes one time in our React app. But now we can use multiple Routes in our React App which gonna help us to manage multiple application logic based on different routes.
import React from 'react';
import { Routes, Route } from 'react-router-dom';
function Dashboard() {
return (
<div>
<p>Look, more routes!</p>
<Routes>
<Route path="/" element={<DashboardGraphs />} />
<Route path="invoices" element={<InvoiceList />} />
</Routes>
</div>
);
}
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="dashboard/*" element={<Dashboard />} />
</Routes>
);
}
Read Also: React Router and Client-Side Routing
Switch Replaced with Routes
<Switch> is replaced with <Routes>. Thanks to this new API, we can define all our routes in one place and have automatic route ranking as well as relative routes and links.
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Routes,
Route
} from 'react-router-dom';
function App() {
return (
<div>
<h1>Welcome</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</div>
);
}
ReactDOM.render((
<Router>
<App />
</Router>
), document.getElementById('app'));
Read Also: Using React Router for optimizing React apps
useRoutes instead of react-router-config
react-router-config package is no longer gonna need. Previously we are using this package to write all routes as an object but now we can do same thing with useRoutes hook with little bit improvements.
Example
function App() {
let element = useRoutes([
// These are the same as the props you provide to <Route>
{ path: '/', element: <Home /> },
{ path: 'dashboard', element: <Dashboard /> },
{ path: 'invoices',
element: <Invoices />,
// Nested routes use a children property, which is also
// the same as <Route>
children: [
{ path: ':id', element: <Invoice /> },
{ path: 'sent', element: <SentInvoices /> }
]
},
// Redirects use a redirectTo property to
{ path: 'home', redirectTo: '/' },
// Not found routes work as you'd expect
{ path: '*', element: <NotFound /> }
]);
// The returned element will render the entire element
// hierarchy with all the appropriate context it needs
return element;
}
useNavigate Instead of useHistory
Thanks to React Router v6 we can easily handle redirecting logic using the useNavigate hook.
useHistory is now history. It’s been replaced with React’s suspense-ready navigate API. From now on, you can useNavigate to navigate around. It has both imperative and declarative options.
Example
import { Navigate, useNavigate } from 'react-router-dom';
function Declarative() {
return <Navigate to="/home" replace state={state} />;
}
function Imperative() {
let navigate = useNavigate();
function handleClick() {
navigate('/home')
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
Read Also: React Router Tutorial: Learn the basics of routing in React
I hope you have learned about React Router now.
Note: React Router v6.0.0-alpha.2 was used at the time of writing.
Suggest:
☞ Top 11 React UI Component Libraries In 2018
☞ React Fundamentals for Beginners
☞ Learn React 2019 - Full Course for Beginners - React 2019 Tutorial