basic example: useLocation

Author: mauriciogc

src/App.js

@@ -4,7 +4,7 @@ import Home from "./Components/Home";
 import Gallery from "./Components/Gallery";
 import About from "./Components/About";
 
-function App() {
+function App() { 
  return (
  <Fragment>
  <Router>

src/Components/Gallery.jsx

@@ -1,16 +1,28 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 
-const Gallery = () => (
-<div>
-<h1>Hello, I'm Gallery component</h1>
+const Gallery = () => {
+const [gallery, setGallery] = useState([]);
+const location = useLocation();
+useEffect(() => {
+console.log(location.pathname);
+const searchParams = new URLSearchParams(location.search);
+const print = Number(searchParams.getAll("print")[0] || 5);
+setGallery(
+new Array(print).fill("https://placem.at/things?w=100&h=100&random=")
+);
+}, [location, setGallery]);
+
+return (
 <div>
-<img src="https://placem.at/things?w=100&h=100&random=0" alt="image0" />
-<img src="https://placem.at/things?w=100&h=100&random=1" alt="image1" />
-<img src="https://placem.at/things?w=100&h=100&random=2" alt="image2" />
-<img src="https://placem.at/things?w=100&h=100&random=3" alt="image3" />
-<img src="https://placem.at/things?w=100&h=100&random=4" alt="image4" />
+<h1>Hello, I'm Gallery component</h1>
+<div>
+{gallery.map((v, i) => (
+<img src={v + i} alt={v + i} key={i} />
+))}
+</div>
 </div>
-</div>
-);
+);
+};
 
 export default Gallery;

src/Components/Home.jsx

@@ -4,6 +4,7 @@ const Home = () => {
 const history = useHistory();
 
 const handleAbout = () => history.push("/about"); //add programmatic routing
+const handleGallery = () => history.push("/gallery?print=20"); //add programmatic routing
 const handleBack = () => history.goBack(); //Back programmatic routing
 const handleForward = () => history.goForward(); //Forward programmatic routing
 
@@ -12,9 +13,12 @@ const Home = () => {
 <h1>Hello, I'm Home component </h1>
 <hr />
 <h2>useHistory</h2>
-<button onClick={handleAbout}>About</button>
+<button onClick={handleAbout}>Go to "About"</button>
 <button onClick={handleBack}>Back</button>
 <button onClick={handleForward}>Forward</button>
+<button onClick={handleGallery}>
+Go to "Gallery" with params "?print=20"
+</button>
 <hr />
 </div>
 );