How to fix React Router component not updating as route changes

Question

I am using react-router-dom for routing in my reactJs application. I have a Route, Account, that has nested routes in it. In the Account component I want to display different components based on the current route (param.id). Right now the initial component is rendering, but when I click on a link my Account component still renders that initial component regardless of that change in url. How can I get my Account component to update on the change of url. Or should I be doing something in the AccountSwitch component to recognize the change of url and update it's current value for props.match.params.id ?

// app.js
<Router>
    <Route path="/account" component={Account} />
</Router>

// account.js
class Account extends Component {
    render() {
        return (
            <div>
                <Link to="/account">Messages</Link>
                <Link to="/account/orders">Orders</Link>

                <Route exact path="/account" component={Messages} />
                <Route path="/account/:id" component={AccountSwitch} />
            </div>
        )
    }
}

// accountSwitch.js
const AccountSwitch = props => {
    switch(props.match.params.id) {
        case '':
            return (
                <AccountMessages />
            );
        case 'orders':
            return (
                <AccountOrders />
            )
        default:
            return <span>select a page<span/>
    }
}

Answer 1

Have you tried withRouter?

import { withRouter } from 'react-router-dom'

const AccountSwitch = props => {
    switch(props.match.params.id) {
        case '':
            return (
                <AccountMessages />
            );
        case 'orders':
            return (
                <AccountOrders />
            )
        default:
            return <span>select a page<span/>
    }
}
export default withRouter(AccountSwitch) 

Answer 2

Use <Switch>

// app.js
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
  <Switch>
    <Route path="/account" component={Account} />
  </Switch>
</Router>

And

// account.js
import { Route, Switch } from 'react-router-dom';

class Account extends Component {
    render() {
        return (
            <div>
                <Link to="/account">Messages</Link>
                <Link to="/account/orders">Orders</Link>
                <Switch>
                    <Route exact path="/account" component={Messages} />
                    <Route path="/account/:id" component={AccountSwitch} />
                </Switch>
            </div>
        )
    }
}

Answer 3

This can also happen if you are using React Router 5 with React 18. In which case the solution is to update to React Router 6.