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

Previous Review

When developing the React + React Router project, we want to achieve the effect of sliding route switching pages.

With two watermelon knives, I cut the way from GitHub to Stack Overflow, but I didn’t find an easy-to-use solution.

One might say, there is a React official library, react-transition-group?

In fact, react-transition-group is a library that provides basic functions. It gives dishes, meat and oil, but it is not a dish that can be directly started.

If you want a very common route switching effect, and you don’t find a perfect solution, you have to encapsulate it yourself.

The react community is too miserable, such a simple thing, after so many years, no one even cares about it, so I have to go to it by myself.

The Show Begins

react-slide-routes 🏄‍♂

https://github.com/nanxiaobei/react-slide-routes

react-slide-routes is used to achieve the following routing handover effect

Install

yarn add react-slide-routes

Use

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

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

Yes, that’s it. Use SlideRoutes instead of Switch. There is no other moth.

I come to E-City to do three things: simple, simple, and TMD simple.

Online example →

Next Preview

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

→ ️ https://github.com/nanxiaobei/react-slide-routes

Over.

🏄‍♂️