Question

当路线匹配时，可以呈现一个组件，例如：

<Route exact path='/' component={Menu} />

但是如何在状态变量中添加一些操作？我尝试过：

<Route exact path='/' render={(props) => { this.state.screentitle = 'Menu'
                                           return (<Menu />) 
                                         }} />

但这不起作用。那么我们如何才能在匹配的<Route>中做两件事：做一些JavaScript，然后渲染组件？

这样做的原因是，我想选择多个“屏幕”之一，例如菜单页面，更新屏幕或搜索页面等。另外，在应用程序的标题栏中有一个屏幕标题。

我也尝试过这个：

<Route exact path='/' render={(props) => { this.setState({screentitle: 'Menu'}); return (<Menu />) }} />

但这会发出运行时警告：Warning: Cannot update during an existing state transition (such as within渲染). Render methods should be a pure function of props and state.

Answer 1

您可以使用react的上下文API来设置screentitle。进一步了解here。

使用react上下文可以在组件（即Menu组件和用户父组件）之间共享数据。您无需在Route渲染功能中执行状态更改，只需导航到Menu组件即可更新上下文。

如果您希望父母自己处理screentitle，则可以使用componentDidUpdate生命周期方法。

componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
  this.onRouteChanged();
 }
}

onRouteChanged可以包含设置screentitle的逻辑。

如何使用react-router Route设置状态变量？

1 个答案: