React Router Parameters

Matthew Garcia

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.

Recommended React and GraphQL course

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.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#