URL 根据所选项目更改 - 但页面不刷新

Question

当我从仪表板导航到 ID 为 1234 的帐户(例如(时，我的 URL 来自：

example.com/

自

example.com/account/1234

这行得通。

但后来我想去账户5678。因此，在我的帐户屏幕上，我尝试导航到：

example.com/5678

URL 在浏览器中更改 - 但页面不会加载。我认为，因为路径(不包括 ID(没有改变。

所以它从example.com/1234变成了example.com/5678

我正在使用BrowserRouter

我的路线已设置：

<Route exact path="/account/:id" component={AccountEditor} />

我的链接是这样的：

<Link to={{ pathname: `/account/${this.props.accountId}`, state: params}}>{this.props.name}</Link>

当组件保持不变但 ID 更改时，如何使其允许更改？

我如何使用路由，这可能是错误的，因为我是新手，但到目前为止它很糟糕，除了这个问题是 - 我有一个 mainLayout 组件。它分为两列。左侧的固定列显示所有页面上的信息，然后是主要部分，该部分根据所选 URL 而变化。

<Row>
<Col md="2">
<LeftInfoBar />
</Col>
<Col md="10">
<RouteManager />
</Col>
</Row>

组件 RouteManager 包含所有组件，如下所示：

class RouteManager extends React.Component {
render() {
return (
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/accounts" component={Accounts} />
<Route exact path="/accounts/:id" component={Accounts} />
... lots of other components...
</Switch>
)
}
}
export default RouteManager

Answer 1

页面组件不会卸载然后挂载，因为只有 URL 参数在更改，而不是"/account"的路由。在这种情况下，我使用的是一个检查组件是否使用来自 props 的 id。

这位于您的帐户页面组件内部。您不必为此更改任何路由。

componentDidUpdate(prevProps) {
if (this.props.match.params.id !== prevProps.match.params.id) {
this.setState({ ['someStateProperty']: newValue })
}
}

您必须将 setState 编辑为您使用的任何内容，但这将触发重新渲染。如果需要使用 api 调用，还可以使用 fetch 获取该if条件中的新数据，并将结果值保存到 state。