React Router Pass Param to Component

React Router Pass Param to Component

React Router is a popular library for handling routing in React applications. It allows you to define routes and render different components based on the URL. In some cases, you may need to pass parameters to a component when navigating to a specific route. In this blog post, we will explore different ways to pass parameters to a component using React Router.

1. URL Parameters

One way to pass parameters to a component is by using URL parameters. React Router allows you to define dynamic segments in your route path, which can be accessed as props in the component.

Here’s an example:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const User = ({ match }) => {
  const { id } = match.params;

  return (
    

      
User ID: {id}
    
  );
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

In the above example, we define a route path “/user/:id” where “:id” is a dynamic segment. The value of “:id” can be accessed in the User component using the “match.params” object.

When navigating to “/user/123”, the User component will receive the “id” prop with a value of “123”.

2. Query Parameters

Another way to pass parameters to a component is by using query parameters. Query parameters are key-value pairs that are appended to the URL after a question mark (?).

Here’s an example:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const User = ({ location }) => {
  const params = new URLSearchParams(location.search);
  const id = params.get('id');

  return (
    

      
User ID: {id}
    
  );
};

const App = () => {
  return (
    
      User 123
      
    
  );
};

export default App;

In the above example, we use the “URLSearchParams” API to extract the query parameter “id” from the location object. The value of “id” can then be accessed in the User component.

When clicking on the “User 123” link, the User component will receive the “id” prop with a value of “123”.

Conclusion

In this blog post, we explored two different ways to pass parameters to a component using React Router. URL parameters are useful when you want to include dynamic segments in your route path, while query parameters are useful for passing key-value pairs in the URL. Choose the method that best suits your use case and start passing parameters to your components with ease!

Final Output:

<

pre>

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const User = ({ match }) => {
  const { id } = match.params;

  return (
    

      
User ID: {id}
    
  );
};

const App = () => {
  return (
    
      
    
  );
};

export default App;