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

Question

我在我的reactJs应用程序中使用react-router-dom进行路由。我有一个路由，帐户，其中包含嵌套的路由。在“帐户”组件中，我想根据当前路线（param.id）显示不同的组件。现在，初始组件正在呈现，但是当我单击链接时，无论url中的变化如何，我的Account组件仍会呈现该初始组件。如何获取我的帐户组件以更新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

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