如何修复 React Router 组件不随着路由变化而更新

Question

我正在使用 react-router-dom 在我的 reactJs 应用程序中进行路由。我有一个路线，帐户，其中有嵌套路线。在 Account 组件中，我想根据当前路由 (param.id) 显示不同的组件。现在初始组件正在呈现，但是当我单击 link 时，无论 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

使用<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>
        )
    }
}

Answer 2

你试过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 3

在 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>

全部导出时试试这个：

导出默认值 withRouter(connect(mapStateToProps, mapDispatchToProps)(Account))

Answer 4

如果您将 React Router 5 与 React 18 一起使用，也会发生这种情况。在这种情况下，解决方案是更新到 React Router 6。

如何修复 React Router 组件不随着路由变化而更新

How to fix React Router component not updating as route changes

reactjs

react-router-dom