路由中的更新位置状态不会反映在父组件上

Question

我有一个react应用，正在使用react-router进行路由。 我创建了一个<PrivateRoute>组件，该组件仅在用户登录时才呈现该组件。在应用程序中，标题中的标题不断变化，这将通过<PrivateRoute>定义进行传递。下面是我的代码：

const PrivateRoute = ({ component: Component, title, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      !empty(getSession()) ? getComponent(props, title, Component): (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

function getComponent(props, title, Component){

  if(notUndefinedAndNull(title)){
    props.location.state = {
      ...props.location.state,
      pageTitle: title
    }
  }

  return <Component {...props} />
}

在定义<PrivateRoute>组件时会传递标题，然后在位置状态下对其进行更新。但是，刷新页面时，标题不会反映在位置状态中。

标题位于所有页面的顶部，如下所示

.
├── App # Top-level component holding Header, Pages and Bottom Nav component
|   ├── Header
|   ├── Pages
|   |   ├── New component(page) will be mounted/unmounted here depending on the Route
|   ├── Bottom Nav

路由在<Pages>组件下定义，并且在位置状态中设置的标题需要传播到父组件<Header>。