React Router Parameters ← Alligator.io

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 (
      <BrowserRouter>
        <div>
          <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}/>
        </div>
      </BrowserRouter>
    );
  }
}

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

This affiliate banner helps support the site 🙏

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 (
    <div>
      {/* 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>
    </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.