Author: John Au-Yeung

To add an external link with React Router, we can set the to prop to an object with the pathname property set to the external URL we go to when the link is clicked.

For instance, we write

<Link to={{ pathname: "https://example.com" }} target="_blank" />

to set the to prop to { pathname: "https://example.com" } to go to https://example.com when we click on the link.

Also, we set target to _blank so that the link opens a new tab when we click it.

Sometimes, we want to pass props in Link with React Router.

In this article, we’ll look at how to pass props in Link with React Router.

How to pass props in Link with React Router?

To pass props in Link with React Router, we can pass them directly tro the Route component the Link component is linking to.

For instance, we write

<Route name="ideas" path="/:id" handler={createIdeaView} />;

to set the name prop of the Route to 'ideas' to pass the name prop to the component being rendered by the Route.

Conclusion

To pass props in Link with React Router, we can pass them directly tro the Route component the Link component is linking to.

Sometimes, we want to add nested routes with React Router v4 or v5.

In this article, we’ll look at how to add nested routes with React Router v4 or v5.

How to add nested routes with React Router v4 or v5?

To add nested routes with React Router v4 or v5, we can nest Route components in the render prop function.

For instance, we write

<BrowserRouter>
  <Route path="/" component={Frontpage} exact />
  <Route path="/home" component={HomePage} />
  <Route path="/about" component={AboutPage} />

  <Route
    path="/admin"
    render={({ match: { url } }) => (
      <>
        <Route path={`${url}/`} component={Test} exact />
        <Route path={`${url}/home`} component={Dashboard} />
        <Route path={`${url}/users`} component={UserPage} />
      </>
    )}
  />
</BrowserRouter>;

to set the render prop to render a fragment with multiple nested Route components.

We set the path to the url with the path append to the url after that.

Also, we set the path prop of the Router with the render prop to set the root url for the nested routes.

Conclusion

To add nested routes with React Router v4 or v5, we can nest Route components in the render prop function.

Sometimes, we want to pass custom props to router component in react-router v4.

In this article, we’ll look at how to pass custom props to router component in react-router v4.

How to pass custom props to router component in react-router v4?

To pass custom props to router component in react-router v4, we pass in the props to the route component directly.

For instance, we write

<Route path="/" exact render={(props) => <Home test="hi" {...props} />} />;

to add the Route component and set its render prop to a function that renders the Home component with the test props along with all the other props from the props parameter, which are spread into the component.

Conclusion

To pass custom props to router component in react-router v4, we pass in the props to the route component directly.

Sometimes, we want to get parameter value from query string with React Router.

In this article, we’ll look at how to get parameter value from query string with React Router.

How to get parameter value from query string with React Router?

To get parameter value from query string with React Router, we can use the useLocation hook.

For instance, we write

import React from "react";
import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const { search } = useLocation();
  const id = new URLSearchParams(search).get("id");
  console.log(id);
  //...
};

to use the useLocation hook to get the URL data.

And then we get the query string from the search property.

Next, we pass in search to URLSearchParams.

And we get the value of the id query parameter with get.

Conclusion

To get parameter value from query string with React Router, we can use the useLocation hook.