Transição entre páginas React Router em site

[wilsongomes-swe]

Fala galera,
tudo certo?!

Finalizando um site em react, porém quero aproveitar que é uma SPA e deixar o mais fluído possível...
Ao trocar de página acaba acontecendo de uma página sumir de uma vez e a outra aparecer, queria saber como vocês aconselham fazer, quero ter uma transição suave, apenas de fadeout e fadein.

Vi que tem alguns pacotes que prometem fazer isto, mas gostaria d saber se há como fazer "á mão" de maneira simples já que pacotes vão vir com muita coisa e eu preciso só do fade in e out.

Usando o ComponentDidMount e ComponenteWillUnmount não deu muito certo pq ao mudar de tela ele já some de uma vez o conteúdo da página em que eu estava.

A página tem rolagem e tudo.

Aliás, a página é esta:
https://preview-pba.netlify.com/

Valeeu!
Abs

Abraços.

[ViniciusGularte]

Opa @wilsonneto-dev tudo blzs? Aqui na empresa a forma que criei foi usando o react-transition-group e tenho uma estrutura mais ou menos assim
`

const currentKey = location.pathname.split('/')[1] || '/';
const animationName = 'rag-fadeIn'
const timeout = { enter: 500, exit: 500 };

     <CSSTransition key={currentKey} timeout={timeout} classNames={animationName} exit={false}>
                    <Suspense fallback={<PageLoader/>}>
                        <Switch location={location}>
                          {/*Rotas */}
                          <Route path="/rota1/" component={waitFor(Rota1)}/>

`
No caso to usando a troca de pagina pra Renderizar este cara passando na key, é uma lib bem simples e serve perfeitamente para o que você procura.

[salatielsql]

Eu conheço essa lib que promete fazer isso que você está querendo:

https://transitionlink.tylerbarnes.ca/docs/transitionlink/#usage