选择react路由器(react)时设置状态

Question

我在react框架中创建了一个web应用程序。当我进入相应的路由器时，我正试图将状态更改为文本。我如何写才能使它正确工作？

class Header extends React.Component {
state = {
title: ""
};
render() {
const { title } = this.state;
return (
<div>
<Typography variant="h6" color="inherit" noWrap>
{title}
</Typography>
<Switch>
<Route exact path="/" component={HomePage} title="Dashboard" />
<Route path="/payment" component={FeaturePage} title="Payment" />
<Route path="" component={NotFoundPage} />
</Switch>
</div>
);
}
}

Answer 1

您可以在使用React路由器的同时向组件传递更新函数。

class Header extends React.Component {
state = {
title: ""
};
updateTitle(newTitle){
this.setState({title: newTitle})
}
render() {
const { title } = this.state;
return (
<div>
<Typography variant="h6" color="inherit" noWrap>
{title}
</Typography>
<Switch>
<Route exact path="/" render={()=> <HomePage updateTitle={this.updateTitle}/>} title="Dashboard" />
<Route path="/payment" render={()=> <FeaturePage updateTitle={this.updateTitle}/>} title="Payment" />
<Route path="" component={NotFoundPage} />
</Switch>
</div>
);
}
}