In this video we are going to learn about Route Parameter.
Route parameters are parameters whose values are set dynamically in a page's URL.
This allows a route to render the same component while passing that component the dynamic portion of the URL, so that it can change its data based on the parameter.
We can also pass a parameter with the route.
React provides two ways of capturing the passed parameter:
Required parameter and Optional Parameter.

So lets see required parameter first.
Before passing the parameter just create a new component.
Lets say component name is User.js.
Now open this component and write the following code.

import React, { Component } from 'react'

class User extends Component {
    state = {
        name:null
    }
    componentDidMount(){
        let name = this.props.match.params.name;
    }

    render() {
        return (
            <div>
                <h3>{this.state.name}</h3> 
            </div>
        )
    }
}

export default User;

Now add this component to the app.js.
So just open app.js and import user component.

import User from './components/User';

Now create here route.

<BrowserRouter>     
    <Switch> 
        <Route exact path='/user/:name' component={User} /> 
    </Switch>     
</BrowserRouter> 

Now lets check so in browser go to the url localhost:3000/user/Jeniffer
And you can see the inside the user component the name jenifer.

If I change the name you can see the another name.
Like /user/John and then press enter and you can see the another name which is John.
Alright, When I remove the parameter then its throwing some error.
It Means, required parameter must be passed here otherwise it will gives error.
Now see optional parameter.
For that we have to add simply parenthesis here inside the route as following.

<BrowserRouter>     
    <Switch> 
        <Route exact path='/user(/:name)' component={User} /> 
    </Switch>     
</BrowserRouter> 

Now this parameter has become optional.
Now check this.
Lets switch to the browser and here just add parameter its show the parameter value here.
If I remove the name from url.
You can see its still working.
So in this way you can add required or optional parameter in react router.