Skip to content

Commit 2cb7d02

Browse files
pettiboypettiboy
committed
🐛 FIX: demo app react router support
1 parent fd6e88f commit 2cb7d02

File tree

6 files changed

+98
-6
lines changed

6 files changed

+98
-6
lines changed

‎README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
# React UI ScrollSpy
44

5-
[![npm](https://img.shields.io/npm/v/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy) [![npm](https://img.shields.io/npm/dm/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)
5+
[![npm](https://img.shields.io/npm/v/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)
6+
[![npm](https://img.shields.io/npm/dy/react-ui-scrollspy.svg)](https://npmjs.com/package/react-ui-scrollspy)
67
[![License MIT](https://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/pettiboy/react-ui-scrollspy/main/LICENSE)
78
[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/pettiboy/react-ui-scrollspy/pulls)
89

@@ -12,6 +13,10 @@
1213

1314
</div>
1415

16+
Customizable and Simple `ScrollSpy` component for `react` with `TypeScript` support.
17+
18+
Make sure you ⭐️ this [`repository`](https://github.com/pettiboy/react-ui-scrollspy) if you find it helpful or interesting :)
19+
1520
## ✨ Installation
1621

1722
```bash

‎demo-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "demo-app",
33
"version": "0.1.0",
4-
"homepage": ".",
4+
"homepage": "http://pettiboy.github.io/react-ui-scrollspy",
55
"private": true,
66
"dependencies": {
77
"@testing-library/jest-dom": "^5.14.1",

‎demo-app/public/404.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Single Page Apps for GitHub Pages</title>
6+
<script type="text/javascript">
7+
// Single Page Apps for GitHub Pages
8+
// MIT License
9+
// https://github.com/rafgraph/spa-github-pages
10+
// This script takes the current url and converts the path and query
11+
// string into just a query string, and then redirects the browser
12+
// to the new url with only a query string and hash fragment,
13+
// e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
14+
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
15+
// Note: this 404.html file must be at least 512 bytes for it to work
16+
// with Internet Explorer (it is currently > 512 bytes)
17+
18+
// If you're creating a Project Pages site and NOT using a custom domain,
19+
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
20+
// This way the code will only replace the route part of the path, and not
21+
// the real directory in which the app resides, for example:
22+
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
23+
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
24+
// Otherwise, leave pathSegmentsToKeep as 0.
25+
var pathSegmentsToKeep = 1;
26+
27+
var l = window.location;
28+
l.replace(
29+
l.protocol +
30+
"//" +
31+
l.hostname +
32+
(l.port ? ":" + l.port : "") +
33+
l.pathname
34+
.split("/")
35+
.slice(0, 1 + pathSegmentsToKeep)
36+
.join("/") +
37+
"/?/" +
38+
l.pathname
39+
.slice(1)
40+
.split("/")
41+
.slice(pathSegmentsToKeep)
42+
.join("/")
43+
.replace(/&/g, "~and~") +
44+
(l.search ? "&" + l.search.slice(1).replace(/&/g, "~and~") : "") +
45+
l.hash
46+
);
47+
</script>
48+
</head>
49+
<body></body>
50+
</html>

‎demo-app/public/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,37 @@
2424
crossorigin="anonymous"
2525
/>
2626

27+
<!-- Start Single Page Apps for GitHub Pages -->
28+
<script type="text/javascript">
29+
// Single Page Apps for GitHub Pages
30+
// MIT License
31+
// https://github.com/rafgraph/spa-github-pages
32+
// This script checks to see if a redirect is present in the query string,
33+
// converts it back into the correct url and adds it to the
34+
// browser's history using window.history.replaceState(...),
35+
// which won't cause the browser to attempt to load the new url.
36+
// When the single page app is loaded further down in this file,
37+
// the correct url will be waiting in the browser's history for
38+
// the single page app to route accordingly.
39+
(function (l) {
40+
if (l.search[1] === "/") {
41+
var decoded = l.search
42+
.slice(1)
43+
.split("&")
44+
.map(function (s) {
45+
return s.replace(/~and~/g, "&");
46+
})
47+
.join("?");
48+
window.history.replaceState(
49+
null,
50+
null,
51+
l.pathname.slice(0, -1) + decoded + l.hash
52+
);
53+
}
54+
})(window.location);
55+
</script>
56+
<!-- End Single Page Apps for GitHub Pages -->
57+
2758
<!--
2859
Notice the use of %PUBLIC_URL% in the tags above.
2960
It will be replaced with the URL of the `public` folder during the build.

‎demo-app/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Demo2 from "./pages/Demo2";
66

77
function App() {
88
return (
9-
<BrowserRouter>
9+
<BrowserRouter basename={process.env.PUBLIC_URL}>
1010
<DummyNav />
1111

1212
<Routes>

‎demo-app/src/components/NavBar/NavBar.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const DummyNav = (props: Props) => {
66
return (
77
<nav className="navbar navbar-expand-lg navbar-dark fixed-top pt-3 position-sticky bg-dark">
88
<div className="container-fluid">
9-
<a href="/" className="navbar-brand">
9+
<a href={process.env.PUBLIC_URL + "/"} className="navbar-brand">
1010
React ScrollSpy
1111
</a>
1212

@@ -24,12 +24,18 @@ const DummyNav = (props: Props) => {
2424
<div className="collapse navbar-collapse" id="navmenu">
2525
<ul className="navbar-nav ms-auto">
2626
<li className="nav-item px-2">
27-
<a href="/" className="text-decoration-none text-white">
27+
<a
28+
href={process.env.PUBLIC_URL + "/"}
29+
className="text-decoration-none text-white"
30+
>
2831
Demo 1
2932
</a>
3033
</li>
3134
<li className="nav-item px-2">
32-
<a href="/demo-2" className="text-decoration-none text-white">
35+
<a
36+
href={process.env.PUBLIC_URL + "/demo-2"}
37+
className="text-decoration-none text-white"
38+
>
3339
Demo 2
3440
</a>
3541
</li>

0 commit comments

Comments
 (0)