The newest features of React Router 6

In this article, the topic will be discussed about the new cool features of react router 6.

React router is a very popular library in reactjs. We use this library in our daily web projects. As before, the react router 5 was used in web development, which was nice. But we, the developers, always try to find something new. So the community helps us to give comfort and ease.

Routes
In react router 5, Switch was used to navigate one link to another. But in version 6, it introduces Routes. I like the way routes behave.
In switch, we used to write our components in a tag and also have a problem of nesting those components. But routes came to solve this. There is no harassment of nesting tags and routing. Also we don’t need to use exact for not found pages.

<BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="customers/*" element={<Customers />} />
    </Routes>
</BrowserRouter>

useRouter
A route can be built with JavaScript objects using this.

useNavigate
It is a coolest feature in react router 6. previously , we used usehistory to navigate but now useNavigate give us an extra flavor of navigating. Also, we can use Navigate that redirect the user.

function Redirect() {
  return <Navigate to="/home" replace />;
}

function HomeButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>Go to home page</button>
    </div>
  );
}