No meu navegador não parece estar criando outra página. O <p><p/> aparece por cima da página home.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
No meu navegador não parece estar criando outra página. O <p><p/> aparece por cima da página home.
Olá, Vitória
Parece que o problema pode estar na sua tag <Route /> para a página inicial. No código que você compartilhou, a tag <App /> está sendo renderizada duas vezes, uma vez dentro do <Route /> e outra vez fora do <BrowserRouter />. Isso pode estar causando o problema que você está vendo.
Aqui está o trecho do seu código que pode estar causando o problema:
root.render(
<React.StrictMode>
<GlobalStyle />
<BrowserRouter>
<Routes>
<Route path="/favoritos" element={<p>Oi!</p>} />
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
<App />
</React.StrictMode>
)
Note que <App /> está sendo renderizado duas vezes, uma vez dentro do <Route /> e outra vez fora do <BrowserRouter />. Para corrigir isso, você deve remover a tag <App /> que está fora do <BrowserRouter />. O código corrigido ficaria assim:
root.render(
<React.StrictMode>
<GlobalStyle />
<BrowserRouter>
<Routes>
<Route path="/favoritos" element={<p>Oi!</p>} />
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
)
Com essa alteração, a página inicial deve ser renderizada corretamente, sem o "Oi!" aparecendo por cima.
Espero ter ajudado e bons estudos!