DEV Community

Cover image for TIL - React Router 2: Dynamic URL Parameters
Anne Quinkenstein
Anne Quinkenstein

Posted on • Updated on

TIL - React Router 2: Dynamic URL Parameters

URL parameters are parameters whose values are set dynamically in a page’s URL. This allows a route to render the same component (UI) while passing that component the dynamic portion of the URL so it can change based off of it.

  1. Create a <Route>
 <Route path="/user-profile/:tool/:name" component={UserProfile} />
Enter fullscreen mode Exit fullscreen mode

The :tool and :name parts of the path will be considered as variable parameters.

  1. Set the <Link> to
             <li>
              <Link to="/user-profile/Github/Leonor">Leonor Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Github/Diana">Diana Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Leonor">Leonor Sandbox</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Diana">Diana Sandbox</Link>
            </li>
Enter fullscreen mode Exit fullscreen mode

React Router will compare the shapes of the paths and pick the right one.

  1. Get the values of the params Object

Whenever React Router v4 renders a component, it’ll pass to that component three props, match, location, and history.

Alt Text

  • url is the actual relative path in your address bar: /Codesandbox/Diana

  • path is, as its name suggests, the path of the matched route: /:tool/:name

  • isExact is a boolean indicating if this is an exact match. It is true here, because the actual path has as many segments as the path attribute; if our current URL had been /Codesandbox/Diana/Surname, the route would have been activated, but isExact would be false.

  • params is an object.If you unfold it, you see that, we can grab the URL parameter (id) as a property on match.params.

const params = props.match.params;
      <h2>
        {params.name}s {params.tool} Profile
      </h2>
Enter fullscreen mode Exit fullscreen mode

useParams Hooks

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

const About = () => {
  const { name } = useParams()

return (
  // props.match.params.name
  <>
     <h1>About {name}</h1>
  </>
)
};
Enter fullscreen mode Exit fullscreen mode

Using URL parameters

In PostList.js, adds this list of fake blog posts, just below the imports:

const allPosts = [
  { year: '2019', month: '09', title: 'React Router v5.1 released' },
  { year: '2019', month: '09', title: 'React 16.10.0 released' },
  { year: '2019', month: '10', title: 'React Conf 2019' },
  { year: '2019', month: '10', title: 'Transition of Node.js 12 to LTS' }
];
Enter fullscreen mode Exit fullscreen mode

Then replace the component's content altogether:

function PostList(props) {
  // Get the URL parameters
  const params = props.match.params;
  // Filter allPosts array: keep posts who have the
  // same month AND same year as the URL parameters
  const filteredPosts = allPosts.filter(
    post => post.year === params.year && post.month === params.month
  );
  return (
    <div>
      <h2>Posts for {params.month}/{params.year}</h2>
      {
        filteredPosts.map(post => (
          <h3>{post.title}</h3>
        ))
      }
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The filter we apply on all Posts is the most interesting part. The Filter iterates over all the posts; its "criterion", i.e. the function that it's given as a paremeter, checks if each post complies with this condition: do the post's year and month match the year and month in the URL? If so, the post object is retained and will be present in filteredPosts.

Finally, we apply map on filteredPosts, in order to display the titles of the matching posts.

Top comments (2)

Collapse
 
shikigami__ profile image
ShiKiGaMi

It's time to learn React-router-dom v6

Collapse
 
annequinkenstein profile image
Anne Quinkenstein

:) i will take a look at it