Table of Contents
URL: https://www.progressiverobot.com/react-react-router-parameters/
[React Router](/react/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.
