[Sugestão] 09 Desafio: construindo páginas

A minha solução foi usando useLocation.

Mas primeiro precisei modificar o main colocando nele o BrowserRouter.

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App.tsx'
// import './main.css'
import { AppRoutes } from './routes.tsx'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  </React.StrictMode>,
)

E no routes com o useLocation com o atributo pathname ele retornar no caminho, se for o favorito ele vai retornar '/favorito' e com uma simples manipulação de string eu separo o '/' do restante. Caso seja '/' ele vai retornar um array vazio.routes.tsx

import { Banner } from './components/Banner'
import { Favoritos } from './components/Favoritos'
import { GlobalStyled } from './components/GlobalStyled'
import { Container } from './components/Container'
import { Rodape } from './components/Rodape'
import { Inicio } from './pages/Inicio'
import { Cabecalho } from './components/Cabecalho'
import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom'

export const AppRoutes = () => {
  const location = useLocation()
  const pathname = location.pathname.split("/")[1]
  return (
    <>
    <GlobalStyled/>
    <Cabecalho/>
    <Banner image={pathname ? pathname : 'home'} /> 
    <Container column>
    <Routes>
    <Route path= '/' element = {< Inicio />}/>
      < Route path = '/favoritos' element = {< Favoritos />}/>
    </Routes>

    </Container>
    
    <Rodape/>
    </>
  )
}