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

Question

I have a bunch of routes, and I want to wrap the component that is rendered for each route in a styled div , but I'm trying to make the code DRYer.

How would you refactor this so that I can add n routes without repeating the <div> each time?

<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

You can compose the Route component pretty much the same as any other react component. You could do the following:

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

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