Getting parameters from URL with React Router

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import User from './User';

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/user/:userName' component={User} />
                    <Route>
                        <div>Default page</div>
                    </Route>
                </Switch>
            </Router>
        );
    }
}

export default App;

User.js

// Functional component

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userName } = useParams();

    return (
        <div>Username: { userName }</div>
    );
}

export default User;

User2.js

// Class component

import React, { Component } from 'react';

class User extends Component {
    render() {
        const { userName } = this.props.match.params;

        return (
            <div>Username: { userName }</div>
        );
    }
}

export default User;