https://github.com/chrisnajman/vite-basic-with-routing
Vite routing setup with easy publish to Git Pages. Includes a custom 404 page, and dynamic sub-routes.
https://github.com/chrisnajman/vite-basic-with-routing
github-pages-website react-router-dom reactjs useparams-hook vitejs
Last synced: about 1 year ago
JSON representation
Vite routing setup with easy publish to Git Pages. Includes a custom 404 page, and dynamic sub-routes.
- Host: GitHub
- URL: https://github.com/chrisnajman/vite-basic-with-routing
- Owner: chrisnajman
- License: mit
- Created: 2024-03-31T11:12:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T12:24:09.000Z (about 1 year ago)
- Last Synced: 2025-02-25T13:30:42.751Z (about 1 year ago)
- Topics: github-pages-website, react-router-dom, reactjs, useparams-hook, vitejs
- Language: JavaScript
- Homepage: https://chrisnajman.github.io/vite-basic-with-routing/
- Size: 584 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite with Basic Routing
## Vite Setup (with Routing) and Easy Publish to Git Pages
This is a clone of ["vite-react-router" (Github repo) by Erick Kuwahara](https://github.com/ErickKS/vite-react-router/tree/main) with the following differences:
- I converted `.tsx` (typescript) files to `.jsx`.
- VS Code was complaining about it, so in `main.tsx` (which I renamed `main.jsx`) I removed `as HTMLElement` from:
`ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(...`
- I extracted the `nav` to its own component (`components/Nav.js`).
- I created a custom 404 page (`/src/pages/NotFoundPage.jsx`).
- I created a 'Profiles' page (`/src/pages/Profiles.jsx`) with sub-routes (`/src/pages/Profile.jsx`).
## Installation and configuring the Git Repo
For all installation and configuration instructions see Erick's Github repo (link above).
You can also watch his step-by-step YouTube tutorial: [Vite React App with Routes Deployed on Github | Reload error resolved!](https://youtu.be/uEEj2c3_ydg).
> [!IMPORTANT]
> The installation and configuration options omit a key step: Once you've finished following the instructions, go to `settings/pages`. Under 'Build and Deployment > Branch' select 'gh-pages' as the branch. Then click 'Save'.