gpt4 book ai didi

react-router-dom - 如何修复 React Router 组件不随着路由更改而更新

转载 作者:行者123 更新时间:2023-12-04 17:42:55 25 4
gpt4 key购买 nike

我在 reactJs 应用程序中使用 react-router-dom 进行路由。我有一个 Route Account,里面有嵌套的路由。在 Account 组件中,我想根据当前路由 (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/>
}
}

最佳答案

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

关于react-router-dom - 如何修复 React Router 组件不随着路由更改而更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55389823/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com