創建包裝組件並將其傳遞到React Router的推薦方法是什么？

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組件與其他任何react組件組成幾乎相同。 您可以執行以下操作：

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

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