Skip to content

Problems with react-router-dom #79

Open
@OliverZott

Description

@OliverZott

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions