Animated page transitions with React Router 4, ReactTransitionGroup and Animated
Martin Haagensli
2K34

How would this work if you are using routeConfig with RR4?

base.js

import React from 'react';
import { renderRoutes } from 'react-router-config';
import { shape } from 'prop-types';
import Header from './Header';
import './Base.css';
const Base = ({route, location}, {router}) => (
<div className="App">
<Header />
{renderRoutes(route.routes, { key: location.pathname,})}
</div>
);
Base.propTypes = {
location: shape({}),
};
export default Base;

routes.js

import Base from './Base';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
export default [
{ component: Base,
routes: [
{ path: '/',
exact: true,
component: Home,
},
{
path: '/about',
component: About,
name: 'About',
},
{
component: NotFound,
},
]
},
]
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.