Как исправить компонент React Router, который не обновляется при изменении маршрута

Question

Я использую Reaction-router-Dom для маршрутизации в моем приложении activJs. У меня есть Маршрут, Учетная запись, в которой есть вложенные маршруты. В компоненте «Учетная запись» я хочу отобразить различные компоненты на основе текущего маршрута (param.id). Прямо сейчас начальный компонент рендеринга, но когда я нажимаю на ссылку, мой компонент Учетной записи все еще отображает тот начальный компонент независимо от того, что изменилось в URL. Как я могу получить компонент моей учетной записи для обновления при изменении URL. Или я должен что-то сделать в компоненте AccountSwitch, чтобы распознать изменение URL и обновить его текущее значение для 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

В https://github.com/Rynebenson/og-website/blob/master/src/_components/wrappers/Account/index.js, где вы используете переключатель маршрута, попробуйте использовать точное совпадение для "/ account" и посмотрите, работает ли это.

Использование:

<Switch>
  <Route exact path={`/account`} component={AccountMessages} />
  <Route path={`/account/:id`} component={AccountSwitch} />
</Switch>

Все при экспорте попробуйте это:

экспорт по умолчанию с помощью роутера (connect (mapStateToProps, mapDispatchToProps) (Account))

Answer 2

Вы пробовали с рутером?

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 3

Использование <Switch>

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

И

// 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>
        )
    }
}