search

kaiwahour / home

Homepage for Kaiwa Hour, A Japanese-English Conversation Group
https://kaiwahour.github.io/home/
MIT License
3 stars 0 forks source link

Deployed Routes correspond to... nowhere #10

Closed captainalan closed 5 years ago

captainalan commented 5 years ago

The deployed site looks as it should and the URLs displayed change as they should when navigating. However, when copy-pasting a URL like https://kaiwahour.github.io/home/about into the location bar, it returns a 404.

This only happens on the deployed site; on the development server I could not reproduce this error.

Why might this be?

tkiapril commented 5 years ago

What I would guess is that since there is no real /home/about directory on the server, GitHub server is not being able to find where to go since it does not know that /home/about actually routes to /home/index.html.

As far as I know, React uses DOM history to route path. As a consequence, a lot of the websites using React have /#!/ in their URL scheme, which gives the browser a sense that they should ask for URL before #! to the server and query the portion after that to the DOM. You might want to look into this. Maybe we should adopt an URL scheme that has /home/#!/about?

As in regards to what the dev server is doing, I have no idea. Are you using something like yarn commands or react commands to put the server up instead of using something like nginx or apache? Then it might be the case that with the dev servers they correctly route to the page since they know where to go (since they were designed with React in mind.)

Though, web frontend is not my area of expertise, so please take these guesses with a grain of salt. ¯_(ツ)_/¯

tkiapril commented 5 years ago

http://singlepageapplication.com/react-app-url-schemes-part-1/ https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

Seems like #! is deprecated though. It would suffice with /#/.

tkiapril commented 5 years ago

Or, on the second thought, refer to these links:

https://medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819 https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48 https://github.com/facebook/create-react-app/issues/1765

captainalan commented 5 years ago

https://github.com/rafrex/spa-github-pages

^ looks like we have a quick fix here. If we have a 404.html in the (deployed) repo that just redirects to the index.html page, a user that copy-pasta's a router generated link will not stay on a 404 page which is no bueno.

Lol, also in the future, we might consider migrating to a static site generate (e.g. GatsbyJS) to avoid all these SPA problems to begin with. May make a feature branch doing that soon.

captainalan commented 5 years ago

Fixed by adding a 404.html as described above.