Não entendi quase nada, explicação muito rápida

Oi, Sergio, tudo bem? Nos desculpe a demora a responder.

Certo, vamos por partes. Vamos analisar o seguinte trecho de código do arquivo routes.js do início da aula:

      <Routes>
        <Route path="/" element={<PaginaPadrao />}>
          <Route index element={<Inicio />} />
          <Route path="sobremim" element={<SobreMim />} />
          <Route path="posts/:id/*" element={<Post />} />
        </Route>

        <Route path="*" element={<NaoEncontrada />} />
      </Routes>

Note que a rota da página Post é uma rota aninhada de PaginaPadrao. A PaginaPadrao é responsável por incluir o Banner no topo da aplicação e por renderizar uma de suas rotas aninhadas. Isso significa que a página Post sempre terá o Banner no topo da página.

Porém, queremos tratar o caso de quando o post solicitado pela URL não é encontrado. Para reutilizarmos a página NaoEncontrada, nós colocamos o seguinte condicional dentro do componente Post:

    if (!post) {
        return <NaoEncontrada />
    }

Entretanto, como Post é uma rota aninhada de PaginaPadrao, o Banner continuará aparecendo no topo da página, mesmo quando um post não for encontrado. Não é isso que queremos, pois o Figma especifica que na página NaoEncontrada não temos o Banner.

Com isso, nós temos que na verdade remover o Post como uma rota aninhada de PaginaPadrao, senão o Banner vai ser sempre renderizado. Como existem casos onde eu não quero mostrar o Banner na página de Post, então realmente é adequado que ele não seja uma rota aninhada de PaginaPadrao.

Assim, o código de routes.js fica assim:

      <Routes>
        <Route path="/" element={<PaginaPadrao />}>
          <Route index element={<Inicio />} />
          <Route path="sobremim" element={<SobreMim />} />
        </Route>

        <Route path="posts/:id/*" element={<Post />} />
        <Route path="*" element={<NaoEncontrada />} />
      </Routes>

Mas aí vem um novo problema: agora o Banner não é mostrado de forma alguma na página de Post, já que ele não é mais uma rota aninhada de PaginaPadrao (mesmo que seja fornecido um id de post válido na URL).

Dessa forma, nós devemos dizer explicitamente dentro do componente de Post que queremos mostrar o Banner quando um post solicitado for encontrado. Na verdade, queremos não só mostrar o Banner, nós queremos reutilizar a estrutura PaginaPadrao. Para isso, é utilizada a solução mostrada em vídeo, onde utilizamos os componentes Routes e Route para conseguirmos utilizar a rota PaginaPadrao dentro do componente Post:

    if (!post) {
        return <NaoEncontrada />
    }

    return (
        <Routes>
            <Route path="*" element={<PaginaPadrao />}>
                <Route index element={
                    /* Código do Post... */
                } />
            </Route>
        </Routes>
    )

O código que mostra um post encontrado é executado apenas quando um id é válido, já que ele está depois do condicional if (!post). Com ele, nós conseguimos reaproveitar a estrutura definida no componente PaginaPadrao, mostrando assim o Banner apenas quando um post é encontrado.

Espero ter ajudado! Abraços e bons estudos :)