Breaking News: Grepper is joining You.com. Read the official announcement!

github pages - vue/react/svelte app - 404 error

codegrepper_bug_reported_2022_december answered on December 8, 2022 Popularity 10/10 Helpfulness 2/10

answer github pages - vue/react/svelte app - 404 error

github pages - vue/react/svelte app - 404 error

Comment

2128

Vue/React/Svelte application with Dynamic Router
- When you call route from browser, then returned 404 error page.
- Problem: Github Pages can't use .htaccess, and you can't redirect all request to main index.html file.
- Solution: Github Pages enable 404.html. In this file we can define JS script, what redirect us to main index.html file with our route.

Example:
- Your index.html can find in "https://username.github.io" or "https://username.github.io/index.html"
- Your route is about can find in "https://username.github.io/about", but "about" folder isn't exists in repository, therefore returned 404 error page (our 404.html).
- Your 404.html redirect from "https://username.github.io/about" to "https://username.github.io/index.html?about".
- Now, just need define routes, what started with "?" in your application.
     - Vue: If you use Vue-Router, you can use this.$router or useRouter() and call push() function.
            const base_folder = '' // your base folder
            const path = ((url.match(new RegExp(`\\b.github.io\/${base_folder}(.*)$`, 'i')) ?? [])[1] ?? '') // called request - ex.: /index.html?about from url
            const route = path.replace('index.html', '').replace('?', '') // route from called request - ex.: /index.html?about --> /about
            // if route isn't '/' then redirect
            if (route.length > 1) {
              useRouter().push(route) // redirect by Vue-Router (not really redirecting, just modify browser's header and preview content, but code running from index.html)
            }

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: codegrepper.bug.not.recommended

Tags: github-pages javascript svelte

Link to this answer
Share Copy Link

Contributed on Dec 08 2022

codegrepper_bug_reported_2022_december

0 Answers Avg Quality 2/10

github pages - vue/react/svelte app - 404 error

Contents

More Related Answers

github pages - vue/react/svelte app - 404 error

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.