use children in routes instead of component prop

This commit is contained in:
Jakob Schrettenbrunner 2021-01-01 17:21:13 +00:00
parent 5f284dad1d
commit 0f9b3a5722
6 changed files with 80 additions and 88 deletions

View file

@ -1,10 +1,9 @@
import React, { useRef } from 'react';
import React from 'react';
import { Route } from 'react-router';
import { SwitchTransition } from 'react-transition-group';
import Fade from '@/components/elements/Fade';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import v4 from 'uuid/v4';
const StyledSwitchTransition = styled(SwitchTransition)`
${tw`relative`};
@ -15,13 +14,11 @@ const StyledSwitchTransition = styled(SwitchTransition)`
`;
const TransitionRouter: React.FC = ({ children }) => {
const uuid = useRef(v4()).current;
return (
<Route
render={({ location }) => (
<StyledSwitchTransition>
<Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
<Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
<section>
{children}
</section>