---

react-slide-routes 🏄‍♂️

The easiest way to slide React routes


---

Fit

React Router v6

> For React Router v5, please use react-slide-routes@1.1.0 and note that the usage is different.

Add

``shell script
pnpm add react-slide-routes


or

yarn add react-slide-routes

or

npm i react-slide-routes
`

Use

`jsx
import { Route } from 'react-router-dom';
import SlideRoutes from 'react-slide-routes';

const App = () => (

} />
} />
} />

);
`

![Edit react-slide-routes](https://codesandbox.io/s/react-slide-routes-bnzlu?fontsize=14&hidenavigation=1&theme=dark)

API

| Prop | Type | Required | Default | Description |
| ----------- | ---------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | string | | 'slide' | Animation effect type, 'slide', 'vertical-slide', or 'rotate' |
| duration | number | | 200 | transition-duration in ms |
| timing | string | | 'ease' | transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear' |
| destroy | boolean | | true | If false, prev page will still exits in dom, just invisible |
| compare | function | | - | Function to sort the routes' order (defaults to the definition order). compare will be used to routes.sort((a, b) => compare(a, b)), routes is the param to useRoutes` |

License

MIT License © nanxiaobei