How to use React router on github pages?

Question

I was setting up a react router for the first time and then i pushed it to gh-pages. It worked when i only routed the contact page. When i added more pages it did not work anymore. It does work in my localhost. My index.js looks like this:

import React from "react"
import ReactDOM from "react-dom/client"
import {App} from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
)

My App.js looks like this:

import { Route, Routes } from "react-router-dom"

import Home from "./pages/home";
import Contact from "./pages/contact";
import Nieuws from "./pages/nieuws";
import Openingstijden from "./pages/openingstijden";
import Producten from "./pages/producten";
import Prijzen from "./pages/prijzen";

export function App() {
    return (
        <Routes>
            <Route path="/KapsalonDeTussenstop/" element={<Home />} />
            <Route path="/KapsalonDeTussenstop/contact" element={<Contact />} />
            <Route path="/KapsalonDeTussenstop/nieuws" element={<Nieuws />} />
            <Route path="/KapsalonDeTussenstop/openingstijden" element={<Openingstijden />} />
            <Route path="/KapsalonDeTussenstop/prijzen" element={<Prijzen />} />
            <Route path="/KapsalonDeTussenstop/producten" element={<Producten />} />
        </Routes>
    )
}

My Home page does work (see image) so i think my gh-pages is good. What do i need to do to fix this?

I tried to follow instructions and I tried to do the routing it worked, but after that not anymore. I also tried hashrouter but then it is also not working on localhost.

Are you getting an error message in the console? What does it say? — kzi, Jul 29 '23 at 15:33
@kzi My console only says: GET https://dave-nbg.github.io/favicon.ico [HTTP/2 404 Not Found 0ms] But that doesn't look like a problem to me — Dave Nieberg, Jul 29 '23 at 15:39
O sorry i found another error: -Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). - Content-Security-Policy: The page’s settings blocked the loading of a resource at https://dave-nbg.github.io/favicon.ico (“img-src”). - Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). — Dave Nieberg, Jul 29 '23 at 15:41
I just tried https://dave-nbg.github.io/ Looks like there's nothing served at all, I'm getting an error 404. — kzi, Jul 29 '23 at 15:50
@kzi It is this link: https://dave-nbg.github.io/KapsalonDeTussenstop/ — Dave Nieberg, Jul 29 '23 at 16:07
The Contact link on your homepage has `/KapsalonDeTussenStop/contact` as target, but it has to be `/KapsalonDeTussenstop/contact`, I think (small s in Tussenstop). Then you have to make sure, that your index.html is served always, regardless of the path. I configured this with an apache2 webserver already but not with github pages. But maybe this will help you: https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48 — kzi, Jul 30 '23 at 07:04
Does this help answer your question? https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages/71985764#71985764 — Drew Reese, Jul 31 '23 at 19:19

score 0 · Answer 1 · answered Jul 29 '23 at 16:09

0

First of all, use exact in <Route />

        <Routes>
            <Route exact path="/KapsalonDeTussenstop/" element={<Home />} />
            <Route exact path="/KapsalonDeTussenstop/contact" element={<Contact />} />
            <Route exact path="/KapsalonDeTussenstop/nieuws" element={<Nieuws />} />
            <Route exact path="/KapsalonDeTussenstop/openingstijden" element={<Openingstijden />} />
            <Route exact path="/KapsalonDeTussenstop/prijzen" element={<Prijzen />} />
            <Route exact path="/KapsalonDeTussenstop/producten" element={<Producten />} />
        </Routes>

Also add a Homepage Route : / by writing.

<Route exact path="/" element={ <Home /> } />

answered Jul 29 '23 at 16:09

Anmol Pal

70
4

I added this but it still doesn't work. I still get the same errors – Dave Nieberg Jul 29 '23 at 16:15
Share the exact code snippet that you've tried lately. @DaveNieberg – Anmol Pal Jul 29 '23 at 16:20
```export function App() { return ( } /> } /> } /> } /> } /> ) }``` – Dave Nieberg Jul 29 '23 at 16:23
i deleted the imports because it was to long – Dave Nieberg Jul 29 '23 at 16:23

score 0 · Answer 2 · answered Jul 30 '23 at 19:42

0

I kind of solved the problem. It did not work if i types in the path like /contact. The button with the exact path was also not working. This button did work: <Link to="/contact">Go to About Page</Link>

answered Jul 30 '23 at 19:42

Dave Nieberg

9

How to use React router on github pages?

2 Answers2