Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented transition support in the Content.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 17:05:22 +02:00
parent aeedf51121
commit 01c8d01783
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/common/components/Content/Content.jsx
View File

@ -1,10 +1,13 @@
import "./styles.sass"; import "./styles.sass";
import {getByPath, routes} from "@/common/routes"; import {getByPath} from "@/common/routes";
import {Route, Routes, useLocation} from "react-router-dom"; import {useLocation, useOutlet} from "react-router-dom";
import {useEffect} from "react"; import {useEffect} from "react";
import {CSSTransition, SwitchTransition} from "react-transition-group";
export const Content = () => { export const Content = () => {
const location = useLocation(); const location = useLocation();
const currentOutlet = useOutlet();
const { ref } = getByPath(location.pathname);
useEffect(() => { useEffect(() => {
document.title = "PowerTools - " + (getByPath(location.pathname)?.name || "404"); document.title = "PowerTools - " + (getByPath(location.pathname)?.name || "404");
@ -12,10 +15,12 @@ export const Content = () => {
return ( return (
<div className="content-wrapper"> <div className="content-wrapper">
<Routes> <SwitchTransition>
{Object.keys(routes).map((route) => (routes[route].map((route) => ( <CSSTransition key={location.pathname} timeout={300} nodeRef={ref} classNames="page" unmountOnExit>
<Route exact path={route.path} element={route.component}/> <div ref={ref} className="page">
))))} {currentOutlet}
</Routes> </div>
</CSSTransition>
</SwitchTransition>
</div>); </div>);
} }