Página 404

Fala ai Rodolfo, tudo bem? Isso vai depender muito da sua arquitetura e como está sendo configurado o gerenciamento de rotas, mas, basicamente o que você pode fazer é criar um wildcard que sempre vai retornar um componente com a mensagem de 404, ou seja:

<Router>
    <Switch>
        <Route path="/" component={Home} />
        <Route path="/lista" component={Lista} />
        <Route path="/formulario" component={Formulario} />
        <Route component={Home} />
    </Switch>
</Router>

Nesse caso se nenhum rota der match com o path a ultima será renderizada (exemplo em React), no Angular o wildcard seria feito através do **.

Espero ter ajudado.

Fala Matheus, bem e você? Então Matheus, tem como você me explicar como fazer essa parte com javascript puro? Com react eu já sei.

Obrigado

Fala Rodolfo, então, ai vai entrar nos detalhes que eu comentei anteriormente, vai depender de como está sua arquitetura e configuração de rotas.

Como eu não tenho contexto do seu projeto fica complicado dizer como fazer isso, sendo assim, compartilha o projeto completo comigo. Assim eu consigo dar uma olhada por aqui com mais calma.

Fico no aguardo.

Aee Matheus, está aqui https://github.com/RodolfoDevDesigner/SPA-TESTE é uma página super simples, só a título de estudo, onde eu não me preocupei com layout e etc... dentro da pasta paginas tem um arquivo: template_erro.js, também super simples, e é esse arquivo que eu quero usar para renderizar a página 404..

baixando o projeto é só executar npm i e npm start

Obrigado

Fala ai Rodofo, fiz um exemplo aqui para você, vamos as mudanças e passos:

Criei um template para rotas não encontradas, arquivo template-not-found dentro da pasta assets/paginas, com o seguinte conteúdo:

 const notFound = () => {

    const notFound = `

        <h1 class="titulo"> Não encontrada</h1>
    `
    return notFound
}

export default notFound

Seguindo o padrão atual.

A segunda mudança foi no router.js, adicionei uma rota para pegar as não encontradas:

import notFound from './assets/paginas/template-not-found' // importei o novo template para rotas não encontrada

const rotas = {
    '/': home,
    '/home': home,
    '/sobreMim': sobreMim,
    '/portfolio': portfolio,
    '/habilidades': habilidades,
    '/contato': contato,
    '**': notFound, // adicionei essa rota
}

Dai na função navegacao eu fiz uma verificação:

const iniciarRota = rotas[window.location.pathname] || rotas['**']

Ou seja, caso não tenha encontrado uma rota para o pathname atual, utiliza a **.

E por ultimo no HTML para testar adicione uma navegação inválida:

<a onclick="navegacao('/uma-rota-desconhecida'); return false;" class="nav__item">Desconhecida</a>

Acho que é isso, com essas mudanças você deve ter o controle de rotas não encontradas.

Espero ter ajudado.

Fala Matheus, obrigado pelo o retorno, mas não funcionou como eu esperava, dá uma olhada por favor nesses exemplos https://imgur.com/a/1pyAPnH que eu printei do que aconteceu, tem mais uma dúvida relacionada lá também

Obrigado

Fala Rodolfo, nesse caso você precisa configurar o servidor para sempre retornar o seu index.html.

Ou seja, qualquer rota que você acessar do seu site, retorne o index.html.

Isso vai depender muito de qual servidor está utilizando, recomendo a utilização do NGINX.

Espero ter ajudado.

Entendi Matheus ... Vou pesquisar

Brigadão

Bom fim de semana Abraço

Magina Rodolfo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.