React Router Parameters


While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

React Router allows information to be read from the URL as parameters.

Creating a Parameterized Route

It’s just a matter of the path property of a Route; any segment that starts with a colon will be treated as a parameter:

class App extends Component {
  render() {
    return (
          <Route exact path="/" component={HomePage}/>
          {/* Parameters are defined by placing a colon before a word. */}
          {/* In this case, `username` is a parameter. */}
          {/* Parameters will be passed to the component. */}
          <Route path="/Users/:username" component={UserPage}/>

When the URL matches the path (ex: ’/Users/Kevin’), that route will be rendered.

Using Parameters

Of course, it doesn’t mean much unless you can access the parameters. So, React Router passes them in as properties:

// Data from `Route` will be passed as a prop called `match`.
function UserPage({ match }) {
  return (
      {/* The URL is passed as `match.url`. */}
      {/* `match.url` and `match.path` will be defined whether or not the path is parameterized. */}
      <div>{`The URL is "${match.url}"!`}</div>
      {/* The path (the one you gave `Route`) is passed as `match.path`. */}
      <div>{`It matched the path "${match.path}"!`}</div>
      {/* The parameters are passed as `match.params`. */}
      <div>{`The parameter is "${match.params.username}"!`}</div>

match.params will be populated with the values from the URL (i.e. for ’/Users/Kevin’, username would be ‘Kevin’).

Parameters can be in any part of the path, not just at the end; for example, if you wanted to add a page about friends of a user, you could make a route at /Users/:username/Friends.


Creative Commons License