The last review

When developing React + React Router, you want to implement the effect of sliding between routes.

Armed with two watermelon knives, I hacked my way from GitHub to Stack Overflow without finding an easy-to-use solution.

Some might say, isn’t there an official scheme for react-transition-groups?

In fact, the React-Transition-group is a library that provides basic functions. It gives food, meat and oil, but it doesn’t deliver a dish that can be eaten.

Want a very common, page slide to slide route switching effect, also did not find a perfect solution, you have to package.

The React community is too sad, such a simple thing for so many years, unexpectedly no one to manage, have to own.

Positive start

The react – slide – routes 🏄 came here

️ github.com/nanxiaobei/…

React-slide-routes is used to implement the route switching effect

The installation

yarn add react-slide-routes
Copy the code

use

import SlideRoutes from 'react-slide-routes';
import { Route, useLocation } from 'react-router-dom';

const App = (a)= > {
  const location = useLocation();
  return (
    <SlideRoutes location={location}>
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} />
    </SlideRoutes>
  );
};
Copy the code

Yes, that’s it, use SlideRoutes instead of Switch, nothing more.

I came to Goose City for three things: simple, simple, and fucking simple.

Online examples →

Fixation of trailer

react-slide-routes, the easiest way to slide React routes.

– > ️ github.com/nanxiaobei/…

Didn’t.

🏄 came ️