React router

package.json

@@ -9,6 +9,7 @@
     "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,31 +1,24 @@
 import './App.css';
-import Character from './components/character';
-import charactersData from './charactersData';
-import CharacterList from './components/character-list';
+import {Routes, Route} from 'react-router-dom';
+import HomePage from './pages/home-page';
+import CharacterOverview from './pages/character-overview';
+import CharacterDetail from './pages/character-detail';
 // import something from 'some place'
 
-// Creating a new function component in the same file
-// Normally, we want to create this component in a separate file
-// Then export it, and import it
-const AppNumberTwo = () => {
-  return (
-    <div>
-      <h1>my title!!!</h1>
-      <p>Heres some paragraph text</p>
-    </div>
-  )
-}
 
 // App.js is the entry point to the rest of your app
+// You can see how this behavior is set up in index.js
 // This is default behavior for create-react-app
 function App() {
   return (
     <div className="App">
-        { /* The below array iterator (map), loops over every element in the charactersData array */}
-        { /* The result of map is another array with new data */}
-        { /* In our case, this new data is a Character component */}
-        <CharacterList />
-        { /* Using array iterator (map) instead of repeating like below: */ }
+        <h4>Here is my header</h4>
+        <Routes>
+          <Route path='/' element={<HomePage />} />
+          <Route path='/characters' element={<CharacterOverview />} />
+          <Route path='/characters/:id' element={<CharacterDetail />} />
+        </Routes>
+        <h4>Here is my footer</h4>
       </div>
   );
 }

src/components/character.js

@@ -1,6 +1,7 @@
 // You can import other components and use them too!
 import Image from './image';
 import LikeCounter from './like-counter';
+import {Link} from 'react-router-dom';
 
 // A React component is just a function that returns some JSX
 // Specifically, it returns some JSX with only one parent element
@@ -15,15 +16,10 @@ const Character = (props) => {
     return (
         <>
             <h1>{props.name}</h1>
-            <h2>Blood type</h2>
-            <p>{props.blood}</p>
-            <h2>Birthday</h2>
-            <p>{props.birthday}</p>
-            <h2>Quote</h2>
-            <p>{props.quote}</p>
             <Image url={props.imgUrl} />
             {/* Passing props from CharacterList even further down into LikeCounter */}
             <LikeCounter likes={props.likes} increaseLikes={props.increaseLikes} id={props.id} />
+            <Link to={`/characters/${props.id}`} >Go to character detail page of character with id {props.id}</Link>
             <hr />
         </>
     )

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {BrowserRouter} from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/pages/character-detail.js

@@ -0,0 +1,41 @@
+import {useParams} from 'react-router-dom';
+import axios from 'axios';
+import {useState, useEffect} from 'react';
+
+const CharacterDetail = () => {
+    const params = useParams();
+    //console.log(params)
+    const id = params.id;
+    console.log(id)
+
+    const [details, setDetails] = useState()
+
+    const getDetails = async () => {
+        const response = await axios.get(`https://my-json-server.typicode.com/TechmongersNL/fs03-react/characters/${id}`);
+        console.log(response.data);
+        setDetails(response.data);
+    }
+
+    useEffect(() => {
+        getDetails();
+    }, [])
+
+    return (
+        details ? 
+            <>
+                <h1>{details.name}</h1>
+                <h2>Blood type</h2>
+                <p>{details.blood}</p>
+                <h2>Birthday</h2>
+                <p>{details.born}</p>
+                <h2>Patronus</h2>
+                <p>{details.patronus}</p>
+                <h2>Quote</h2>
+                <p>{details.quote}</p>
+                <img src={details.imgUrl} alt={details.name} />
+            </> :
+            'Loading...'
+    )
+}
+
+export default CharacterDetail;

src/pages/character-overview.js

@@ -0,0 +1,11 @@
+import CharacterList from "../components/character-list";
+
+const CharacterOverview = () => {
+    return (
+        <div>
+            <CharacterList />
+        </div>
+    )
+}
+
+export default CharacterOverview;

src/pages/home-page.js

@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const HomePage = () => {
+    return (
+        <div>
+            <h1>Home page</h1>
+            <h2>This is the Harry Potter home page!</h2>
+            <Link to='/characters'><button>Go to overview page</button></Link>
+        </div>
+    )
+}
+
+export default HomePage;