创建包装组件并将其传递给 React Router 的推荐方法是什么？答案

【问题标题】：What's the recommended way to create and pass a wrapped component to React Router?创建包装组件并将其传递给 React Router 的推荐方法是什么？
【发布时间】：2018-02-07 14:25:48
【问题描述】：

我有一堆路由，我想将每个路由呈现的组件包装在样式 div 中，但我正在尝试使代码更干燥。

您将如何重构它以便我可以添加 n 路由而无需每次都重复 <div>？

<Route
   path="/"
   exact
   component={
     <div className={css(styles.fadeIn)}>
       <Home />
     </div>
    }
   />
<Route
 path="/about"
 exact
 component={
   <div className={css(styles.fadeIn)}>
     <About />
   </div>
  }
 />

【问题讨论】：

把它包裹在Route? Route 组件本身不渲染任何东西，所以它不会妨碍你的风格。
@ChrisR 我认为包装不适用于这种淡入淡出样式，我将只移动组件内的 div 或使用 js 控制的淡入淡出 div 进行包装。

标签： javascript reactjs react-router jsx

【解决方案1】：

您可以像任何其他 React 组件一样编写 Route 组件。您可以执行以下操作：

const AnimatedRoute = ({ component: Component, ...rest}) => (
  <div className={css(styles.fadeIn)}>
    <Route component={Component} {...rest} />
  </div>
)

//Somewhere else
<AnimatedRoute component={About} />

【讨论】：