07routerProject

07reactRouter/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

07reactRouter/src/App.jsx

@@ -11,8 +11,6 @@ function App() {
 
   return (
     <>
-
-
     </>
   )
 }

07reactRouter/src/Layout.jsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import Header from './components/Header/Header'
-import Footer from './components/Footer/Footer'
-import { Outlet } from 'react-router-dom'
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './components/Header/Header.jsx';
+import Footer from './components/Footer/Footer.jsx';
 
-function Layout() {
-  return (
+const Layout = () => {
+  return(
     <>
-    <Header/>
+    <Header />
     <Outlet />
     <Footer />
-    </>
+    </>    
   )
 }
 
-export default Layout
+export default Layout;

07reactRouter/src/components/Github/Github.jsx

@@ -1,28 +1,35 @@
-import React, { useEffect, useState } from 'react'
-import { useLoaderData } from 'react-router-dom'
+import {useEffect, useState} from "react"   
+import { ApiLoader } from "../Loader/ApiLoader"
+
+const Github = () => {
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try{
+        const responseData = await ApiLoader();
+        setData(responseData);
+      }
+      catch(error){
+        console.error("Something went wrong : ", error)
+      }
+    }
+    fetchData();
+  }, [])
 
-function Github() {
-    const data = useLoaderData()
-    // const [data, setData] = useState([])
-    // useEffect(() => {
-    //  fetch('https://api.github.com/users/hiteshchoudhary')
-    //  .then(response => response.json())
-    //  .then(data => {
-    //     console.log(data);
-    //     setData(data)
-    //  })
-    // }, [])
-
   return (
-    <div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl'>Github followers: {data.followers}
-    <img src={data.avatar_url} alt="Git picture" width={300} />
+    <div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl'>
+    {/* Github followers: {data.followers}
+    Username: {data.name} */}
+    <h1>Name : {data.name}</h1>
+    <h1>Bio : {data.bio}</h1>
+    <h1>followers : {data.followers}</h1>
+    <h1>Public Repository : {data.public_repos}</h1>
+    <h1>Location: {data.location}</h1>
+    <img src={data.avatar_url} alt="Git picture" width={300} className="mx-auto justify-center rounded-full mt-10 mb-5"/>
     </div>
   )
 }
 
 export default Github
-
-export const githubInfoLoader = async () => {
-    const response = await fetch('https://api.github.com/users/hiteshchoudhary')
-    return response.json()
-}

07reactRouter/src/components/Header/Header.jsx

@@ -36,7 +36,7 @@ export default function Header() {
                                 <NavLink
                                 to="/"
                                     className={({isActive}) =>
-                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
+                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-black" : "text-blue-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
                                     }
                                 >
                                     Home
@@ -46,7 +46,7 @@ export default function Header() {
                                 <NavLink
                                 to="/about"
                                     className={({isActive}) =>
-                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
+                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-black" : "text-blue-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
                                     }
                                 >
                                     About
@@ -56,7 +56,7 @@ export default function Header() {
                                 <NavLink
                                 to="/contact"
                                     className={({isActive}) =>
-                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
+                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-black" : "text-blue-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
                                     }
                                 >
                                     Contact
@@ -66,12 +66,23 @@ export default function Header() {
                                 <NavLink
                                 to="/github"
                                     className={({isActive}) =>
-                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
+                                        `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-black" : "text-blue-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
                                     }
                                 >
                                     Github
                                 </NavLink>
                             </li>
+
+                            <li>
+                                <NavLink 
+                                to="/user"
+                                className={({isActive}) =>
+                                `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-black" : "text-blue-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
+                                }
+                                >
+                                User
+                                </NavLink>
+                            </li>
 
                         </ul>
                     </div>

07reactRouter/src/components/Loader/ApiLoader.jsx

@@ -0,0 +1,6 @@
+import { useLoaderData } from "react-router-dom";
+
+export const ApiLoader = async () => {
+    const response = await fetch('https://api.github.com/users/umeshraut2002')
+    return response.json();
+}

07reactRouter/src/components/User/User.jsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { useParams } from 'react-router-dom'
 
+
 function User() {
-    const {userid} = useParams()
+  const {userid} = useParams();    
   return (
     <div className='bg-gray-600 text-white text-3xl p-4'>User: {userid}</div>
   )

07reactRouter/src/main.jsx

@@ -1,48 +1,25 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
-import Layout from './Layout.jsx'
-import Home from './components/Home/Home.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+import { Route, RouterProvider, createRoutesFromElements ,createBrowserRouter  } from 'react-router-dom';
+import Layout from './Layout.jsx';
+import Home from './components/Home/Home.jsx';
 import About from './components/About/About.jsx'
 import Contact from './components/Contact/Contact.jsx'
-import User from './components/User/User.jsx'
-import Github, { githubInfoLoader } from './components/Github/Github.jsx'
-
-// const router = createBrowserRouter([
-//   {
-//     path: '/',
-//     element: <Layout/>,
-//     children: [
-//       {
-//         path: "",
-//         element: <Home />
-//       },
-//       {
-//         path: "about",
-//         element: <About />
-//       },
-//       {
-//         path: "contact",
-//         element: <Contact />
-//       }
-//     ]
-//   }
-// ])
+import Github from './components/Github/Github.jsx';
+import User from './components/User/User.jsx';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<Layout />}>
-      <Route path='' element={<Home />} />
+      <Route path='home' element={<Home />} />
       <Route path='about' element={<About />} />
       <Route path='contact' element={<Contact />} />
-      <Route path='user/:userid' element={<User />} />
-      <Route 
-      loader={githubInfoLoader}
-      path='github' 
-      element={<Github />}
-       />
+      <Route path='github' element={<Github />} />
+      <Route path='user' element={<User />} >
+        <Route path=':userid' element={<User />} />
+      </Route>
     </Route>
   )
 )