Question

我正在尝试在{title}位置显示来自React Router的props值，但我不知道是否可能。

如果路由器'/dashboard'，{title} ='Dashboard'，否则，如果路由器'/payment'，{title} ='Payment'

class Header extends React.Component {
  state = {
    title: '',
  };

  render() {
    const { title } = this.state;

  return (
     <Typography>
         {title}
     </Typography>

  <Switch>
    <Route title="Dashboard" exact path="/dashboard" component={DashboardPage} />
    <Route title="Payment" path="/payment" component={PaymentPage} />
  </Switch>
  )

Answer 1

方法1：您可以使用withRouter来包装Header组件，后者提供位置作为prop且内部具有路径名。您可以使用它来更改标题。

方法2：您将一个作为prop的函数传递给DashboardPage，它将在Header组件中设置标题状态。

在页眉组件中：

_setTitle = (title) => this.setState({ title })

通过_setTitle如下

<Route
  path='/dashboard'
  exact
  render={(props) => <DashboardPage {...props} setTitle={this._setTitle} />}
/>

在DashboardPage组件的构造函数中，执行setTitle来设置正确的标题，如下所示：

class DashboardPage extends Component {
    constructor(props) {
      super(props);
      this.props.setTitle('Dashboard');
    }
}

对PaymentPage做同样的事情。

这应该有效。让我知道这是否可以解决您的问题。

如果选择其他React Router，是否更改状态？

1 个答案: