Routing Issue

sandeep-shaw10 · Apr 20, 2021 · 7609e30 · 7609e30
1 parent 627efdf
commit 7609e30
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 19 deletions.
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
+
+    <title>REFRESH</title>
+    <script type="text/javascript">
+      var segmentCount = 1;
+
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
+        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,26 @@
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>React App</title>
+
+    <script type="text/javascript">
+      (function(l) {
+          if (l.search) {
+            var q = {};
+            l.search.slice(1).split('&').forEach(function(v) {
+              var a = v.split('=');
+              q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
+            });
+            if (q.p !== undefined) {
+              window.history.replaceState(null, null,
+                l.pathname.slice(0, -1) + (q.p || '') +
+                (q.q ? ('?' + q.q) : '') +
+                l.hash
+              );
+            }
+          }
+        }(window.location))
+    </script>
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -48,11 +48,11 @@ class App extends Component {
                 language: ["Add Language"],
                 education:[
                     {
-                      "name": '',
-                      "degree": '',
-                      "from": '',
-                      "to": '',
-                      "about": '',
+                      "name": 'Institute of ABC, XYZ',
+                      "degree": 'B. Sc',
+                      "from": '2015',
+                      "to": '2018',
+                      "about": '<p> About.... </p>',
                     }
                 ]
             }
@@ -70,14 +70,14 @@ class App extends Component {
 
 
     render() {
-        var containLink = "/resume";
+        var containLink = "resume-cv-maker/resume";
         return (
             <>
                 <Router>
                     <CustomNavbar />
                     <Switch>
-                        <Route exact path="/about" component={About}/>
-                        <Route exact path="/contact" component={Contact}/>
+                        <Route exact path="/resume-cv-maker/about" component={About}/>
+                        <Route exact path="/resume-cv-maker/contact" component={Contact}/>
 
                         <Route exact path={containLink+"/details"}>
                             <Details detail={this.state} updateState={this.updateState}/>
@@ -103,7 +103,7 @@ class App extends Component {
                         <Route exact path={containLink+"/preview"}>
                             <Preview data={this.state} updateState={this.updateState}  />
                         </Route>
-                        <Route path="/" component={Home} />
+                        <Route path="/resume-cv-maker" component={Home} />
                     </Switch>
                     <Footer />
                 </Router>

diff --git a/src/PageComponents/CustomNavbar.jsx b/src/PageComponents/CustomNavbar.jsx
@@ -14,10 +14,10 @@ export default class CustomNavbar extends Component {
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className="ml-auto">
-                        <Link className="pr-4 my-1 navlink" to="/home">Home</Link>
-                        <Link className="pr-4 my-1 navlink" to={"/resume"+containLink}>Resume</Link>
-                        <Link className="pr-4 my-1 navlink" to="/about">About</Link>
-                        <Link className="pr-4 my-1 navlink" to="/contact">Contact</Link>
+                        <Link className="pr-4 my-1 navlink" to="/resume-cv-maker/home">Home</Link>
+                        <Link className="pr-4 my-1 navlink" to={"/resume-cv-maker/resume"+containLink}>Resume</Link>
+                        <Link className="pr-4 my-1 navlink" to="/resume-cv-maker/about">About</Link>
+                        <Link className="pr-4 my-1 navlink" to="/resume-cv-maker/contact">Contact</Link>
                     </Nav>
                 </Navbar.Collapse>
                 </Navbar>

diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
 import App from './App';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <HashRouter >
-        <App />
-    </HashRouter>
-  </React.StrictMode>,
+    <App />,
   document.getElementById('root')
 );