Reason to use React Router Hooks

Before React Router 5:

By default, while using the component prop (<Route component={} />), React router passes three props(match, location, history) to the component that the Route renders. That means, if you, for some reason, want to access the history or location instance used by React router, you can access it through the default props.

But if you pass your custom props to your components then the default props get overridden by your custom props. As a result, you will not have any further access to the history object created by React Router. And before React Router 5, there was no way other than using the render prop (<Router render={} />) to explicitly pass the location, match, and history instance as props.

Javascript

// Filename - App.js
 
import "./styles.css";
import { Route, Switch } from "react-router-dom";
import About from "./components/About";
 
export default function App() {
    return (
        <div className="App">
            <Switch>
                // In this case, you have to use render //
                instead of component and explicitly // pass
                the props
                <Route
                    path="/about"
                    render={({
                        match,
                        location,
                        history,
                    }) => (
                        <About
                            match={match}
                            location={location}
                            history={history}
                            someProps={{ id: 21254 }}
                        />
                    )}
                />
            </Switch>
        </div>
    );
}

Javascript

// Filename - About.js
 
import { useLocation } from "react-router-dom";
 
export default function (props) {
    // Accessing the location and history
    // through the props
    const location = props.location;
    const history = props.history;
    return <div>// Some content</div>;
}

With React Router 5 Hooks:

Now with React Router 5, you can easily pass your custom props to the rendering component.

Though in this case also those three props (match, location, history) don’t get past the rendered components automatically, we can now use the hooks provided by React Router 5, and we don’t need to think about the props anymore. You can directly access the history object by using the useHistory hook, location object with useLocation hook, and match the object with useRouteMatch hook, and you don’t have to explicitly pass the props to the components.

Javascript

// Filename - App.js
 
import "./styles.css";
import { Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import ContactUs from "./components/ContactUs";
import LogIn from "./components/LogIn";
import AboutUs from "./components/AboutUs";
 
export default function App() {
    return (
        <div className="App">
            <Switch>
                <Route path="/" exact>
                    <Home someProps={{ id: 54545454 }} />
                </Route>
                <Route path="/about">
                    <AboutUs />
                </Route>
                <Route path="/contact-us">
                    <ContactUs />
                </Route>
                <Route path="/log-in">
                    <LogIn />
                </Route>
            </Switch>
        </div>
    );
}

Javascript

// Filename - Home.js
 
import {
    useHistory,
    useLocation,
    useParams,
    useRouteMatch,
} from "react-router-dom";
 
export default function Home(props) {
    // Access the history object with useHistory()
    const history = useHistory();
 
    // Access the location object with useLocation
    const location = useLocation();
 
    // Access the match object with useRouteMatch
    const match = useRouteMatch();
 
    // Extract the URL parameters with useParams
    const params = useParams();
 
    return <div>{/* Some code */}</div>;
}

React-Router Hooks

React-Router is a popular React library that is heavily used for client-side routing and offers single-page routing. It provides various Component APIs( like Route, Link, Switch, etc.) that you can use in your React application to render different components based on the URL pathnames on a single page.

Tags:

#React-Hooks #JavaScript #ReactJS #Web Technologies

useRouteMatch Hook :

Reason to use React Router Hooks

Before React Router 5:

Javascript

Javascript

With React Router 5 Hooks:

Javascript

Javascript

React-Router Hooks

Similar Reads

Contact Us