Category: React

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.

Sometimes, we want to pass parameters with history.push, Link, or Redirect in React Router v4.

In this article, we’ll look at how to pass parameters with history.push, Link, or Redirect in React Router v4.

How to pass parameters with history.push, Link, or Redirect in React Router v4?

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.

For instance, we write

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: {
    detail: response.data
  }
})

to call history.push with an object with the state property to pass props to the history object.

With the Link, component, we write

<Link
  to={{
    pathname: "/template",
    search: "?query=abc",
    state: { detail: response.data },
  }}
>
  My Link
</Link>

to set the to prop to an object with the state property containing the data that we want to pass into the route component as props.

Conclusion

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.