你如何将支柱传递到所有反应路线？ （动态更改标题）

Question

我使用redux来管理状态，所以我从根组件传递状态和绑定动作。

我正在使用react-router-redux的{​​{1}}，内部有一个包含所有路由和重定向的开关。我试图阻止ConnectedRouter与setRouteTitle一起传递。路由器开关类似于下面的代码。

routeTitle

首先传递一个函数及其参数，使组件在挂载/拥有道具后立即运行，然后在每条路径上定义它，这似乎是多余的。

如果不创建扩展<Switch> <Route exact path="/" component={ Dashboard } routeTitle="Dashboard" setRouteTitle={ setRouteTitle } dashboardState={ state.dashboard }/> <Route exact path="/gear" component={ Gear } routeTitle="Gear Management" setRouteTitle={ setRouteTitle } gearState={ state.gear }/> <Route exact path="/users" component={ Users } routeTitle="Users Management" setRouteTitle={ setRouteTitle } usersState={ state.users }/> </Switch> 或其他内容的新组件，或者这是一个好主意，是否有任何方法可以做到这一点？

Answer 1

也许你可以为Route创建一个包装器组件

// make sure 'setRouteTitle' is in the scope of MyRoute
// and routeProps has the structure = { component, routeTitle, ...etc  }
function MyRoute ({ ...routeProps }) => (
  <Route
    exact 
    path="/" 
    setRouteTitle={setRouteTitle}
    {...routeProps}
  />
);

这样你的开关组件就会更加简洁，如下所示：

// in js 
const setRouteTitle = /* some value */
const dashboardProps = { component: Dashboard, routeTitle: 'Dashboard', dashboardState: state.dashboard } 
const gearManagementProps = { component: Gear, /* ... the rest of props */ }
const userProps = { component: User, /* ... the rest of props */ }

// jsx in your render
<Switch>
  <MyRoute {...dashboardProps} />
  <MyRoute {...gearManagementProps} />
  <MyRoute {...userProps} />
</Switch>