Redirect to a section in react

aarabii · Aug 1, 2022 · 518a98a · 518a98a
1 parent d51d115
commit 518a98a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,7 +6,6 @@ import Home from "./components/Home/Home";
 
 import PageNotFound from "./components/Pages/404Page/PageNotFound";
 import ComingSoon from "./components/Pages/ComingSoon/ComingSoon";
-import AboutMe from "./components/Pages/AboutMe/AboutMe.Jsx";
 
 const App = () => {
   return (
@@ -20,7 +19,7 @@ const App = () => {
             <ComingSoon />
           </Route>
           <Route exact path="/about">
-            <AboutMe />
+            <Home section="about" />
           </Route>
           <Route path="/cv">
             <ComingSoon />

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -10,8 +10,15 @@ import GithubRepo from "../Section/GithubProjects/GithubRepo";
 
 import PreLoader from "../../hooks/PreLoader/PreLoader";
 
-const HomePage = () => {
+const HomePage = (props) => {
   const [inView, setInView] = useState("");
+  const [section] = useState(props.section);
+
+  useEffect(() => {
+    let scrollTo = document.getElementById(section);
+    if (scrollTo) scrollTo.scrollIntoView();
+  }, []);
+
   return (
     <div>
       <Nav inView={inView} />
@@ -25,7 +32,7 @@ const HomePage = () => {
   );
 };
 
-const Home = () => {
+const Home = (props) => {
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -35,7 +42,9 @@ const Home = () => {
     }, 2500);
   }, []);
 
-  return <div>{loading ? <PreLoader /> : <HomePage />}</div>;
+  return (
+    <div>{loading ? <PreLoader /> : <HomePage section={props.section} />}</div>
+  );
 };
 
 export default Home;