Skip to content

Commit bdd220d

Browse files
vjspranavvjspranav
authored
Improvise Dynamic Routing (#320)
* Implement Dynamic Routing * wref: vjspranav/StagBin@efb6317 Signed-off-by: vjspranav <[email protected]> * Improve isSplash conditional rendering Signed-off-by: vjspranav <[email protected]> * Fix deploy preview --------- Signed-off-by: vjspranav <[email protected]>
1 parent 45d929a commit bdd220d

File tree

3 files changed

+139
-123
lines changed

3 files changed

+139
-123
lines changed

‎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 = 0;
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>

‎public/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,34 @@
7878
Learn how to configure a non-root public URL by running `npm run build`.
7979
-->
8080
<title>Ashutosh's Portfolio</title>
81+
<script type="text/javascript">
82+
// Single Page Apps for GitHub Pages
83+
// MIT License
84+
// https://github.com/rafgraph/spa-github-pages
85+
// This script checks to see if a redirect is present in the query string,
86+
// converts it back into the correct url and adds it to the
87+
// browser's history using window.history.replaceState(...),
88+
// which won't cause the browser to attempt to load the new url.
89+
// When the single page app is loaded further down in this file,
90+
// the correct url will be waiting in the browser's history for
91+
// the single page app to route accordingly.
92+
(function (l) {
93+
if (l.search[1] === "/") {
94+
var decoded = l.search
95+
.slice(1)
96+
.split("&")
97+
.map(function (s) {
98+
return s.replace(/~and~/g, "&");
99+
})
100+
.join("?");
101+
window.history.replaceState(
102+
null,
103+
null,
104+
l.pathname.slice(0, -1) + decoded + l.hash
105+
);
106+
}
107+
})(window.location);
108+
</script>
81109
</head>
82110
<body>
83111
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/containers/Main.js‎

Lines changed: 61 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from "react";
2-
import { Route, Switch, HashRouter } from "react-router-dom";
2+
import { Route, Switch, BrowserRouter } from "react-router-dom";
33
import Home from "../pages/home/HomeComponent";
44
import Splash from "../pages/splash/Splash";
55
import Education from "../pages/education/EducationComponent";
@@ -12,127 +12,65 @@ import Error404 from "../pages/errors/error404/Error";
1212

1313
export default class Main extends Component {
1414
render() {
15-
if (settings.isSplash) {
16-
return (
17-
<div>
18-
<HashRouter basename="/">
19-
<Switch>
20-
<Route
21-
path="/"
22-
exact
23-
render={(props) => (
24-
<Splash {...props} theme={this.props.theme} />
25-
)}
26-
/>
27-
<Route
28-
path="/home"
29-
render={(props) => <Home {...props} theme={this.props.theme} />}
30-
/>
31-
<Route
32-
path="/experience"
33-
exact
34-
render={(props) => (
35-
<Experience {...props} theme={this.props.theme} />
36-
)}
37-
/>
38-
<Route
39-
path="/education"
40-
render={(props) => (
41-
<Education {...props} theme={this.props.theme} />
42-
)}
43-
/>
44-
<Route
45-
path="/opensource"
46-
render={(props) => (
47-
<Opensource {...props} theme={this.props.theme} />
48-
)}
49-
/>
50-
<Route
51-
path="/contact"
52-
render={(props) => (
53-
<Contact {...props} theme={this.props.theme} />
54-
)}
55-
/>
56-
<Route
57-
path="/splash"
58-
render={(props) => (
59-
<Splash {...props} theme={this.props.theme} />
60-
)}
61-
/>
62-
<Route
63-
path="/projects"
64-
render={(props) => (
65-
<Projects {...props} theme={this.props.theme} />
66-
)}
67-
/>
68-
<Route
69-
path="*"
70-
render={(props) => (
71-
<Error404 {...props} theme={this.props.theme} />
72-
)}
73-
/>
74-
</Switch>
75-
</HashRouter>
76-
</div>
77-
);
78-
} else {
79-
return (
80-
<div>
81-
<HashRouter basename="/">
82-
<Switch>
83-
<Route
84-
path="/"
85-
exact
86-
render={(props) => <Home {...props} theme={this.props.theme} />}
87-
/>
88-
<Route
89-
path="/home"
90-
render={(props) => <Home {...props} theme={this.props.theme} />}
91-
/>
92-
<Route
93-
path="/experience"
94-
exact
95-
render={(props) => (
96-
<Experience {...props} theme={this.props.theme} />
97-
)}
98-
/>
99-
<Route
100-
path="/education"
101-
render={(props) => (
102-
<Education {...props} theme={this.props.theme} />
103-
)}
104-
/>
105-
<Route
106-
path="/opensource"
107-
render={(props) => (
108-
<Opensource {...props} theme={this.props.theme} />
109-
)}
110-
/>
111-
<Route
112-
path="/contact"
113-
render={(props) => (
114-
<Contact {...props} theme={this.props.theme} />
115-
)}
116-
/>
117-
{/* <Route
118-
path="/splash"
119-
render={(props) => (
120-
<Splash
121-
{...props}
122-
theme={this.props.theme}
123-
/>
124-
)}
125-
/> */}
126-
<Route
127-
path="/projects"
128-
render={(props) => (
129-
<Projects {...props} theme={this.props.theme} />
130-
)}
131-
/>
132-
</Switch>
133-
</HashRouter>
134-
</div>
135-
);
136-
}
15+
return (
16+
<BrowserRouter basename="/">
17+
<Switch>
18+
<Route
19+
path="/"
20+
exact
21+
render={(props) =>
22+
settings.isSplash ? (
23+
<Splash {...props} theme={this.props.theme} />
24+
) : (
25+
<Home {...props} theme={this.props.theme} />
26+
)
27+
}
28+
/>
29+
<Route
30+
path="/home"
31+
render={(props) => <Home {...props} theme={this.props.theme} />}
32+
/>
33+
<Route
34+
path="/experience"
35+
exact
36+
render={(props) => (
37+
<Experience {...props} theme={this.props.theme} />
38+
)}
39+
/>
40+
<Route
41+
path="/education"
42+
render={(props) => (
43+
<Education {...props} theme={this.props.theme} />
44+
)}
45+
/>
46+
<Route
47+
path="/opensource"
48+
render={(props) => (
49+
<Opensource {...props} theme={this.props.theme} />
50+
)}
51+
/>
52+
<Route
53+
path="/contact"
54+
render={(props) => <Contact {...props} theme={this.props.theme} />}
55+
/>
56+
57+
{settings.isSplash && (
58+
<Route
59+
path="/splash"
60+
render={(props) => <Splash {...props} theme={this.props.theme} />}
61+
/>
62+
)}
63+
64+
<Route
65+
path="/projects"
66+
render={(props) => <Projects {...props} theme={this.props.theme} />}
67+
/>
68+
<Route
69+
path="*"
70+
render={(props) => <Error404 {...props} theme={this.props.theme} />}
71+
/>
72+
</Switch>
73+
</BrowserRouter>
74+
);
13775
}
13876
}

0 commit comments

Comments
 (0)