What Are the New Features of React Router v6?

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>
  );
}

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>

  );

}

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>
  );
}

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>
  );
}

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>
  );
}

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>

  );

};

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.

Free Resources

License: Creative Commons-Attribution NonCommercial-ShareAlike 4.0 (CC-BY-NC-SA 4.0)