React Router v6: The Cutting Edge

The most recent major version, React Router v6, launched in 2021, offers numerous improvements. A key highlight is the addition of the useNavigate hook, which replaces the older withRouter higher-order component (HOC) and the history object used in prior versions.

For example, here’s how to implement the useNavigate hook for navigation:

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

function Component() {

const navigate = useNavigate();

const handleClick = () => {

navigate("/posts");

};

return <button onClick={handleClick}>Go to Posts</button>;

}

In this snippet, useNavigate provides a navigate function for programmatic navigation within your app. This function takes a path as its argument, with optional parameters such as replace and state.

Another significant update in v6 is the elimination of the Switch component, now replaced by the Routes component, which renders the first matching Route that corresponds to the current URL.

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

function App() {

return (

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/contact" element={<Contact />} />

</Routes>

);

}

React Router v6 also introduces the Outlet component, allowing for more intricate nested routing.

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

function App() {

return (

<div>

<nav>

<Link to="/">Home</Link>

<Link to="/about">About</Link>

<Link to="/contact">Contact</Link>

</nav>

<Outlet />

</div>

);

}

React Router v5: Embracing Hooks

Released in 2019, React Router v5 marked a pivotal moment by integrating React hooks. This version enabled developers to utilize hooks such as useHistory, useLocation, and useParams for navigation and accessing route information.

Here’s an example of using the useHistory hook:

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

function HomeButton() {

const history = useHistory();

const handleClick = () => {

history.push("/");

};

return <button onClick={handleClick}>Go Home</button>;

}

In this case, useHistory provides the history object with methods like push, replace, and go to facilitate route navigation.

React Router v5 also introduced the useRouteMatch hook, allowing access to details about the current route match.

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

function PostDetails() {

const match = useRouteMatch("/posts/:postId");

if (!match) {

return <div>Not found</div>;

}

const postId = match.params.postId;

// Fetch and render post details using postId

return <div>Post Details: {postId}</div>;

}

React Router v4: A Modern Approach

Released in 2017, React Router v4 represented a shift toward a more modern, React-centric routing approach. This version removed the need for separate ReactRouter and ReactRouterRedux packages, consolidating everything into the react-router-dom package.

In v4, programmatic navigation was handled through the history object accessed via component props, provided the component was a child of the Router.

class Example extends React.Component {

handleClick = () => {

this.props.history.push("/some/path");

};

render() {

return <button onClick={this.handleClick}>Go Somewhere</button>;

}

}

If a component wasn’t a child of the Router, the withRouter HOC could be used to inject the history object.

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

class Example extends React.Component {

handleClick = () => {

this.props.history.push("/some/path");

};

render() {

return <button onClick={this.handleClick}>Go Somewhere</button>;

}

}

export default withRouter(Example);

The Switch component was also introduced, which renders the first matching child Route or Redirect, improving route handling.

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

function App() {

return (

<Switch>

<Route path="/" component={Home} />

<Route path="/about" component={About} />

<Route path="/contact" component={Contact} />

</Switch>

);

}

React Router v3: Transitioning to React

Launched in 2016, React Router v3 embraced the React ecosystem more fully, introducing the react-router package specifically designed for React applications, replacing the older react-router-component.

In v3, programmatic navigation was achieved by accessing the router object through component props.

class Example extends React.Component {

handleClick = () => {

this.props.router.push("/some/path");

};

render() {

return <button onClick={this.handleClick}>Go Somewhere</button>;

}

}

Similar to previous versions, if the component was not a child of the Router, the withRouter HOC could be utilized.

import { withRouter } from "react-router";

class Example extends React.Component {

handleClick = () => {

this.props.router.push("/some/path");

};

render() {

return <button onClick={this.handleClick}>Go Somewhere</button>;

}

}

export default withRouter(Example);

Additionally, v3 introduced the NavLink component, simplifying the styling of active links in navigation menus.

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

function Navigation() {

return (

<nav>

<NavLink to="/">Home</NavLink>

<NavLink to="/about">About</NavLink>

<NavLink to="/contact">Contact</NavLink>

</nav>

);

}