react-gh-pages Problems with react-router-dom

Hi,

first of all, thanks for the good work and that great project. I'm havin major troubles though, using react-router-dom v6 with gh-pages. As soon as i start using routes, the gh-page just shows a lank screen.

For example this is the App.tsx code

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Home } from './pages/Home';
import DemonList from './pages/DemonList';

function App() {
	return (
		<div className="App">
			<BrowserRouter basename={process.env.PUBLIC_URL}>
				<Routes>
					<Route path="/" element={<Home />}></Route>
					<Route path="/demons" element={<DemonList />}></Route>
				</Routes>
			</BrowserRouter>
		</div>
	);
}

export default App;

The html source-view at https://oliverzott.github.io/react-gh-page/ is just showing

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/react-gh-page/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/react-gh-page/logo192.png" />
    <link rel="manifest" href="/react-gh-page/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/react-gh-page/static/js/main.6461c301.js"></script>
    <link href="/react-gh-page/static/css/main.073c9b0a.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

I tried a lot of suggested fixes and workarounds, but nothing worked so far.

Best regards Olli

Feb 03 '22 18:02 OliverZott

Hi, thanks for your brilliant project! But I just met the same problem as OliverZott when deployed my blog.

In App.tsx :

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL + '/'}>
      <Routes>
        <Route path="/home" element={<Home />} /> 
        <Route path="/" element={<Trips />} /> 
      </Routes>
    </Router>
  );
}

and the packages.json :

  "homepage": "https://lionelsy.github.io/maps",
...
    "react-router-dom": "^6.2.2",
...

But I can only view the https://lionelsy.github.io/maps and the page (https://lionelsy.github.io/maps/home) shows 404 : (

I revised the code referring to many examples (most under react-router-dom v5), but it doesn't work.

Best regards!

Mar 21 '22 15:03 Lionelsy

Having the same issue for a while, found any solution yet? :))

Apr 19 '22 07:04 catherineisonline

Hi @Lionelsy and @catherineisonline, sorry about the long wait. If you are still getting GitHub's HTTP 404 error page, you may want to employ one of the two workarounds I listed in https://github.com/gitname/react-gh-pages/issues/104#issuecomment-1203373499.

Hi @OliverZott, sorry I am only replying now. I see the "Here are demons" UI at the link you provided, so I think things are working for you now. Please let me know whether you still have questions.

Aug 03 '22 01:08 gitname

react-gh-pages react-gh-pages copied to clipboard

Problems with react-router-dom

react-gh-pages
react-gh-pages copied to clipboard