react
ASP.NET Core,  CSS,  React,  SPA

route transition for redux-little-router, react ASP.NET Core

redux-little-router is a good client side routing library for project that uses React and Redux. However, adding transition to the route pages could be tricky. redux-little-router provides a react component Fragment for use to define the route pages. Each route page component will be wrapped by a Fragment component. As far as I know (after looking at the coding), Fragment component will render the route page component it is wrapping only when the route information and conditions are matched. So it’s like a on/off switch that simply turns the route page component on or off and you won’t be able to add transition to Fragment component to transition from one page to another. Therefore, we need a custom fragment component to replace Fragment in order to introduce route transition for redux-little-router.

Goal: enable route transition for redux-little-router

Base project code: Example code from React Routing with redux-little-router, ASP.NET Core SPA will be used as starting point.

Npm packages

Add the following package to “dependencies” in file package.json

Custom fragment component

Fortunately, building a custom fragment component (a simple one) based on router information is simple enough. It can be as simple as follow:

Simply compare the route path to the forRoute property to determine if the page is active or not. We can then enhance this custom fragment component to incorporate transition.

Adding transition using css-transitioner

We have a custom react component to perform css page transitioning. More info please check out css-transitioner, React route page transition make easy.

This component enables page transition using css. We will include sass definitions for fade in/out and slide in/out to demonstrate the transitions. Note that a built-in feature of Transitioner is the ability to maintain the scroll position of each page.

Next we enhance the custom fragment component by using  Transitioner to perform transitions. Add this custom fragment component as RouteTransitioner.tsx with following codes:

RouteTransitioner is the custom fragment component used to wrap around the route page component. You can provide a custom getStatus() property for each RouteTransitioner  to determine what transition style to use based on the router information. Default transition style is fade in/fade out.

Adding SASS definitions

Next we define some css styles to perform the transitions. Add the follow sass definitions as Sass > Transitions.scss:

Right click on Transitions.scss and click on Web Compiler > Compile file to generate the .css file. Copy  Transitions.css to wwwroot/css/ folder. Then include Transition.css in the web page by adding the following lines to Views > Shared > _Layout.cshtml.

Update routes.tsx

Now we incorporate use of RouteTransitioner instead of Fragment. Import the component at the top of routes.tsx as follow:

Next replace App const with the following to enable transitions:

That’s it. Default transition is fade in/out.

Bonus: slide in/out instead

We now provide a custom getStatus() method to use sliding instead. First remove the routes constant and then add following codes to routes.tsx:

Then we add getStatus property to each RouteTransitioner to use the custom function:

Transition should now become slide in/out instead.

 

Example code for route transition for redux-little-router is available at Github.

More Read

How to use redux-little-router: React Routing with redux-little-router, ASP.NET Core SPA

Leave a Reply

Your email address will not be published.