// Tutorial //

React Router Parameters

Published on June 15, 2017
Default avatar
By Matthew Garcia
Developer and author at DigitalOcean.
React Router Parameters

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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 (
      <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.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click here to Sign up and get $200 of credit to try our products over 60 days!