Routing Done Easy With react router v6

In a single page application with multiple views or subpage, a mechanism is needed to navigate between the different views without refreshing the page again and again. React Router provides a way to do that programmatically for applications developed with react. The most recent version of it is v6, which still awaits it final roll out and is in the beta phase of use. Lets explore more of the new features about this new library and how it helps us create routes for our SPAs.

Getting Started

In order to start using the react router v6, we have to first install it :

     npm install react-router@6.0.0-beta.0 react-router-dom@6.0.0-beta.0

This is how your package.json file will look after installation :

“dependencies": {
    // rest of the dependencies installed
    "react-router": "6.0.0-beta.0",
    "react-router-dom": "6.0.0-beta.0",
  },

Go to src/index.js and import BrowserRouter as Router and wrap the <App /> component with it.

//other import statements
import { BrowserRouter as Router } from "react-router-dom";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
   <Router>
    <App /> 
   </Router>
  </StrictMode>,
  rootElement
);

Creating the first route

With all that setup, we are ready to create the first ever routing in our application. Lets move back to our src/App.jsand import a Routes component from react-router-dom.

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

This Routes component is nothing but an upgraded version of what was called Switch in the earlier versions of the react router. It involves relative routing, linking, nested routing etc. The next component we have to import is the Route component. It accepts two props - path and element. The path prop tells the URL of the application on which routing happens and the element tells which component is to be rendered when path matches the application's current URL.

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

To create a route, we need to have a component with us, So lets create a Home component:

function Home() {
     return <div>This is homepage. It will render when / path is hit in the URL</div>
}

Now let create the first route of our SPA(Single Page Application). To use this Route in the App function component, we will wrap it inside the Routes component

export function App() {
   return (
       <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    );
}

Same can be done for other components which are to be rendered on different URLs. Such as <Route path="/about" element={<About />} /> for about section etc.

Creating a Link

In a normal web app a user is provided with several links which take them to the specified location. React Router also provides a way to do that by using a component called Link. It accepts a prop to which tells it the path to where it should be routed.

To use it we have to first import it from react-router-dom.

import { Routes, Route, Link } from "react-router-dom";

Now lets use this Link in the Home component to navigate to About component.

function Home() {
  return (
    <div>
      <h2>This is homepage. It will render when / path is hit in the URL </h2>
      <Link to="/about">Navigate To About</Link>
    </div>
  );
}
function About() {
  return <div>This is your About Section </div>;
}

export default function App() {
  return (
    <div className="App">
      <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

Navigating Programmatically

Sometimes we want to get redirected to page once some action is confirmed, for e.g. User Submitting a form or logging/Signing to a web app. To get this feature we take useNavigate api from the react-router-dom into action.

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

Lets see through an example how this works :

Lets assume that there is a component LoginForm which accepts a prop onSubmit to perform some function

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

function UserSubmit() {
  let navigate = useNavigate();
  return (
    <div>
      <LoginForm
        onSubmit={() => {
          navigate(`/about`);
        }}
      />
    </div>
  );
}

Now when the loginForm is submitted it redirects the user to /about path which renders About component.

Conclusion

There are lot more APIs in react router v6 and it is pretty exciting. Hopefully this article helps you in introducing this to-be newest version and the changes and upgrades to come.

Read more about the React Router v6 in The Full API reference

Code Space