URL Parameters with React Router

Today we will show you how to set URL parameters with React Router. Major use of URL parameters routing is to render the same component based on its dynamic url.

We are going to continue with the previous example. So refer the previous article Routing in React JS.

https://youtu.be/PkYL4AM38fY

The complete guide of Routing in ReactJS

• Routing in React JS
• URL Parameters with React Router (You are here...)
• Nested Routes in React JS
• Multiple parameters with React Router
• What’s new in React Router version 6

Key points for URL Parameters with React Router

1. Why we need URL Parameters
2. Add route for Not Found page
3. Implement URL Parameters with Example
4. Output

1. Why we need URL Parameters

As I mentioned previously, To render the same react component based on given dynamic URL like If you have a list of users and you want to display the user details by Id (www.xyz.com/user/1, www.xyz.com/user/2, etc) then URL Parameters is used.

2. Add route for Not Found page

Before we jump on URL Parameters, I want to let you know how to set Not Found page via react router. For that can you please refer previous article. I am going to continue with it.

We need to create Not Found component to load when URL will not match with listed routes.

Notfound.js

import React, { Component } from 'react';

class Notfound extends Component {
  render() {
    return <div>
      <h2 style={{ marginBottom: 0 }}>404</h2>
      <h4 style={{ marginTop: 0 }}>Page Not Found!</h4>
    </div>
  }
}

export default Notfound;

We will add this component route at the end of all of the listed routes. Now this is how your updated index.js file looks.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import App from './App';
import About from './About';
import Contact from './Contact';
import Notfound from './Notfound';

const routing = (
  <BrowserRouter>
    <div>
      <h3>Clue Mediator</h3>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/about/1">About 1</Link>
        </li>
        <li>
          <Link to="/about/2">About 2</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </BrowserRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Let’s check it by manually entering wrong path like http://localhost:3000/abc.

Output - Page Not Found - Clue Mediator

3. Implement URL Parameters with Example

Now simply we need to update index.js file to handle the URL params. Following command will be used for that.

<Route path="/about/:id" component={About} />

Use below command if you want to set parameter as optional. (For React Router v4 and above)

<Route path="/about/:id?" component={About} />

For React Router v1, v2 and v3

<Route path="/about(/:id)" component={About} />

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import App from './App';
import About from './About';
import Contact from './Contact';
import Notfound from './Notfound';

const routing = (
  <BrowserRouter>
    <div>
      <h3>Clue Mediator</h3>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/about/1">About 1</Link>
        </li>
        <li>
          <Link to="/about/2">About 2</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/about/:id?" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </BrowserRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Use below command to get the url parameters

const { params } = this.props.match;

So your About.js file will look like the following

About.js

import React, { Component } from 'react';

class About extends Component {
  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.id ? <b>ID: {params.id}</b> : <i>ID is optional.</i>}
    </div>
  }
}

export default About;

4. Output

Output - URL Parameters with React Router - Clue Mediator

Demo & Source Code

Github Repository