Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problems with react-router-dom #79

Open
OliverZott opened this issue Feb 3, 2022 · 4 comments
Open

Problems with react-router-dom #79

OliverZott opened this issue Feb 3, 2022 · 4 comments
Labels
react-router App uses React Router

Comments

@OliverZott
Copy link

OliverZott commented Feb 3, 2022 •
edited

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
@Lionelsy
Copy link

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!

@catherineisonline
Copy link

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

@gitname
Copy link
Owner

gitname commented Aug 3, 2022

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 #104 (comment).

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.

@gitname gitname added the react-router App uses React Router label Aug 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
react-router App uses React Router
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@gitname @Lionelsy @OliverZott @catherineisonline and others