Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
react

What Are the New Features of React Router v6?

Salman Masood

Overview

The release of the new React Router version six has brought many improvements as compared to its previous version, thereby creating ease for the developer community.

The new <Routes> element

Note: In v5 it used to be known as the <switch> element.

This has brought new features, such as automatic route ranking, nested routes, and relative route and linking. This makes the program code more representable. Some advantages of <Routes> over <Switch> are as follows:

  • Since all <Route> and <link> elements are relative to the <Routes> element, and the <Routes> element can be nested together, this makes a clean and less scattered code.
  • Routes can be placed in any order based on the best match of the URL. Previously, the <switch> element required manual placement of the routes, which sometimes forms an incorrect sequence.

Code comparison between <Routes> and <Switch>

Let's look at an example of how to use the <Switch> statement in react-router v5.

import {BrowserRouter, Switch, Route} from 'react-router-dom'

function App(){
  return(
    <BrowserRouter>
      <Switch>
        <Route exact path = "/"> <Main Page /> </Route>
        <Route path = "/user"> <User /> </Route>
      </Switch>
    </BrowserRouter>
  );
}
Switch statement used in React Router v5

Let's look at an example of how to use <Routes> in react-router v6.

import { BrowserRouter, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main Page />} />
        <Route path="user/" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}
Routes used in React Router v6

Nested Routes are much simpler than before as it does not involve string-matching logic in the components.

import { BrowserRouter, Route, Link, useRouteMatch} from 'react-router-dom';

function User() {

  let {myPath, url} = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${url}/my_info`}>User Info</Link>
      </nav>

      <Route path={`${myPath}/cars`}>
        <UserByCars />
      </Route>
      
    </div>
  );
}
React Router v5 nested routes

The above code snippet shows the use of nested routes in v5 that required strict string matching logic. However, in the new version (v6) they have eliminated the need for the string matching logic and useRouteMatch() as shown below.

import { BrowserRouter, Routes, Route} from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="user_info/*" element={<User />}/>
      </Routes>
    </BrowserRouter>
  );
}
function User() {
  return (
    <div>
      <Routes>
        <Route path = "cars" element={UserByCars /}/>
      </Routes>
    </div>
  );
}
Nested routes using React Router v6

In the new version, the string matching is eased by this asterisk, where, any route present in User component (after user_info/) would be handled.

Note: There is no need to call <Route path> and <Link to> properties from the parent route.

Similarly, in the new feature render and the component prop is replaced with the element prop.

Moreover, a very useful feature introduced is the useNavigate hook to move from one page to another (previously, useHistory was used for this purpose in v5) providing navigation actions with better compatibility.

Comparison of useHistory and useNavigate

Let's look at an example of how to use the useHistory hook in React-router v5.

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  return (
    <button type="button" onClick={()=>{history.push("/home")}}>
      Go to Homepage
    </button>
  );
}
useHistory in React Router v5

Instead of history.push(), now the navigate() function is used.

import { useNavigate } from 'react-router-dom';

function HomeButton() {
  let navigate = useNavigate();

  return(
     <button onClick={()=>{navigate('/home')}}>
      Go to Homepage
     </button>
  );
};
useNavigate hook in React Router v6

If we want to replace the current URL instead of pushing a new one, we can use:

navigate('/home', {replace: true});

Instead of the following:

history.replace('/home');

Furthermore, navigate() can also be passed with an integer parameter. For instance, if someone wants to implement a back button, they can pass -1 as a parameter to the navigate() function and if we want to go forward we can pass 1 as shown below:

// move backwards
<button onClick={() => navigate(-1)}>
  Go Back
</button>

// move forward
<button onClick={() => navigate(1)}>
  Next Page
</button>

// move 2 pages forward
<button onClick={() => navigate(2)}>
  Go 2 pages forward
</button>

All these improvements in the new version have resulted in a smaller bundle size, which means the application would run faster, even in poor network connections making it more robust.

RELATED TAGS

javascript
react
RELATED COURSES

View all Courses

Keep Exploring