Question

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

你如何重构这个以便我可以添加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>
  }
 />

Answer 1

您可以将Route组件与任何其他反应组件完全相同。您可以执行以下操作：

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

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

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

1 个答案: