Gustavo_Rallenson_Goncalves_Da_Silva/desafio-react-e-typescript
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pages)add estrutura de react router dom

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-13 05:04:12 -03:00
parent fdadebbf41
commit 3c89ee90bd
6 changed files with 65 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
desafio-5/public/index.html
View File

@ -10,7 +10,8 @@
/>
<title>Desafio-5</title>
</head>
<body id="root">
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

10
desafio-5/src/components/scripts/header.tsx
View File

@ -3,6 +3,9 @@ import { Formik,Form, Field, FormikHelpers } from 'formik';
import { Submenu } from "../../Modal/submenuModal";
import {SubmenuContext} from "../../contexts/SubmenuContext";
import {RouterContext} from "../../contexts/React_Router_context"
import { Link, Navigate } from "react-router-dom";
import { pathroot } from "../../pages/router/Pathrooter";
import HeaderStyles from "../modules/header.module.scss"
@ -22,6 +25,7 @@ const initialValues = {
const Header = () =>{
const { navigate } = useContext(RouterContext);
const { isOpened, setisOpened } = useContext(SubmenuContext)
const handleSeacrhFormikSubmit = (values:SearchboxTypes, formik: FormikHelpers<SearchboxTypes>) =>{
formik.resetForm();
@ -97,9 +101,9 @@ const Header = () =>{
<div className={HeaderStyles["Header_wrapper-bottom"]}>
<nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>
<ul>
<li><button>CURSOS</button></li>
<li><button>SAIBA MAIS</button></li>
<li><button>INSTITUCIONAIS</button></li>
<li><button onClick={() => navigate("/Cursos")}>CURSOS</button></li>
<li><button onClick={() => navigate("/Saiba+&+Mais")}>SAIBA MAIS</button></li>
<li><button onClick={() => navigate("/Institucional")}>INSTITUCIONAIS</button></li>
</ul>
</nav>
</div>

27
desafio-5/src/contexts/React_Router_context.tsx Normal file
View File

@ -0,0 +1,27 @@
import { createContext ,useState} from 'react';
interface pathtype {
currentRoute:string
navigate: (route: string) => void
}
export const RouterContext = createContext({} as pathtype);
export const RouterProvider :React.FC<{ children: React.ReactNode }>= ({ children }) => {
const [currentRoute, setCurrentRoute] = useState('/');
const navigate = (route: string) => {
console.log(route)
setCurrentRoute(route);
}
return (
<RouterContext.Provider value={{ currentRoute:currentRoute, navigate:navigate }}>
{children}
</RouterContext.Provider>
)
}

10
desafio-5/src/index.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import Routers from "./pages/router/Pathrooter"
import { Header } from './components/scripts/header';
import { Footer } from './components/scripts/footer';
import Main from './components/scripts/main';
import Routers from './pages/router/Pathrooter';
import {SubmenuProvider} from "./contexts/SubmenuContext"
import {RouterProvider} from "./contexts/React_Router_context"
import './components/Main.scss';
import './components/common/global.scss';
import './components/common/resets.scss';
@ -13,11 +13,13 @@ const rootElement = document.getElementById('root');
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<RouterProvider>
<SubmenuProvider>
<Header />
<Main />
<Footer />
</SubmenuProvider>
<Routers />
<Footer />
</RouterProvider>
);
} else {
// rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.

3
desafio-5/src/pages/Institucional.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from "react"
import { Formik,Form, FormikHelpers } from 'formik';
import { BrowserRouter as Path, Routes, Route} from "react-router-dom"
import moment from 'moment';
import Homeicon from "../components/assets/icons/home_icon.svg"
@ -8,7 +7,7 @@ import Leftarrow from "../components/assets/icons/Leftarrow.svg"
import MainStyles from "../components/modules/home.module.scss"
import FormShecma from "../schema/FormShecma";
import { Title,BreadcrumbTitle,FormTitle } from "../components/scripts/moleculas/Title"
import { Inputform} from "../components/scripts/moleculas/InputForm"
import { Inputform } from "../components/scripts/moleculas/InputForm"
const title = "INSTITUCIONAL"

34
desafio-5/src/pages/router/Pathrooter.tsx
View File

@ -1,5 +1,11 @@
import { BrowserRouter as Pathrooter, Routes, Route, Navigate } from "react-router-dom"
import Institucional from '../Institucional';
import { BrowserRouter as Router,Routes, Route, Navigate } from 'react-router-dom';
import Institucional from '../Institucional';
import { RouterContext } from '../../contexts/React_Router_context';
interface pathtype {
currentRoute:string
navigate: (route: string) => void
}
const pathroot = {
Home: "/",
@ -9,16 +15,20 @@ const pathroot = {
}
const Routers = () => {
return(
// rotas
<Pathrooter>
<Routes>
<Route path={pathroot.Home} element={<Institucional />}/>
<Route path={pathroot.Cursos} element={<div>estou no Cursos</div>}/>
<Route path={pathroot.SaibaMais} element={<div>estou no Saiba Mais</div>}/>
<Route path={pathroot.Institucional} element={<Institucional />}/>
<Route path="*" element={<Navigate to="/"/>}/>
</Routes>
</Pathrooter>
<RouterContext.Consumer>
{({ currentRoute }:pathtype) => (
<Router>
<Routes>
<Route path={pathroot.Home} element={currentRoute === '/' ? <Institucional /> : null} />
<Route path={pathroot.Cursos} element={currentRoute === '/cursos' ? <div>estou no Cursos</div> : null} />
<Route path={pathroot.SaibaMais} element={currentRoute === '/saiba+&+mais' ? <div>estou no Saiba Mais</div> : null} />
<Route path={pathroot.Institucional} element={currentRoute === '/institucional' ? <Institucional /> : null} />
<Route path="*" element={<Navigate to={pathroot.Home}/>}/>
</Routes>
</Router>
)}
</RouterContext.Consumer>
)
}