use children in routes instead of component prop
This commit is contained in:
parent
5f284dad1d
commit
0f9b3a5722
6 changed files with 80 additions and 88 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue