react router v5 to v6 nested route not working

user_17627697 0
Viewed 833

I've been trying to solve the following problem : I try to upgrade this Frontend Mentor project https://haydee75.github.io/galleria/ from React Router v5 to v6. I tried to replace the code between with :

<Routes>
          <Route path="galleria" element={<Gallery datas={data} clickEvent={handleSlideShow} />} />
          <Route path="/galleria/:urlPath" element={<Paint datas={data} />} />   
</Routes>

but it does not work as when I am on a Paint page when clicking on next (or prev) button it adds url to the existing one so the route is wrong. I also tried :

<Routes>
          <Route path="galleria" element={<Gallery datas={data} clickEvent={handleSlideShow} />}>
            <Route path="/galleria/:urlPath" element={<Paint datas={data} />} />
          </Route>
</Routes>

But it does not work either.

Below are relevant components :

import "./Gallery.scss";
import { Link } from "react-router-dom";

const Gallery = ({ datas, clickEvent }) => {
  return (
    <div className="Gallery">
      {datas.map((data, index) => {
        return (
          <div key={index} className="thumbnail">
            <Link to={"/galleria/" + data.urlPath} onClick={clickEvent}>
              <img
                className="image"
                src={data.images.thumbnail}
                alt={data.images.name}
              />
            </Link>
          </div>
        );
      })}
    </div>
  );
};

export default Gallery;

import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import "./Paint.scss";
import Modal from "../Modal/Modal";

const Paint = ({ datas }) => {
  let { urlPath } = useParams();
  const paint = datas.find((data) => data.urlPath === urlPath);

  const nextSlide = datas.indexOf(paint) + 1;
  const prevSlide = datas.indexOf(paint) - 1;

  const [showModal, setShowModal] = useState(false);

  const handleModal = () => {
    setShowModal(!showModal);
  };

  const color1 = "#000";
  const color2 = "#ccc";

  const indexPaint = datas.indexOf(paint) + 1;
  const datasLenght = datas.length;

  const blackLineWidth = Math.round((indexPaint * 100) / datasLenght);
  const greyLineWidth = 100 - blackLineWidth;

  return (
    <div className="Paint">
      {paint ? (
        <>
          <div className="container">
            <div className="row main">
              <div
                className="main-image"
                style={{
                  backgroundImage: `url("${paint.images.hero.large}")`,
                }}
              >
                <div className="icon-view-image" onClick={handleModal}>
                  <span>View Image</span>
                </div>
              </div>
              {showModal && (
                <Modal
                  largeImage={paint.images.gallery}
                  altProp={paint.name}
                  closeModal={handleModal}
                />
              )}
              <div className="main-informations">
                <div className="info">
                  <h1>{paint.name}</h1>
                  <p>{paint.artist.name}</p>
                </div>
                <div className="img-artist">
                  <img src={paint.artist.image} alt={paint.artist.name} />
                </div>
              </div>
            </div>
            <div className="row content">
              <div className="date">
                <span>{paint.year}</span>
              </div>
              <div className="description">
                <p>{paint.description}</p>
                <a
                  className="source"
                  href={paint.source}
                  target="_blank"
                  rel="noreferrer"
                >
                  <span className="link-secondary">Got to source</span>
                </a>
              </div>
            </div>
          </div>
          <div
            className="progress-bar"
            style={{
              backgroundImage: `linear-gradient(to right,  ${color1}, ${color1} ${blackLineWidth}%, ${color2} ${blackLineWidth}%, ${color2} ${greyLineWidth}%)`,
            }}
          ></div>
          <div className="footer">
            <div className="column">
              <h3>{paint.name}</h3>
              <div className="artist-name">
                <span>{paint.artist.name}</span>
              </div>
            </div>
            <div className="column nav-links">
              <span className="prev-btn">
                {prevSlide <= -1 ? (
                  <span className="disable"></span>
                ) : (
                  <Link className="active" to={datas[prevSlide].urlPath}></Link>
                )}
              </span>
              <span className="next-btn">
                {nextSlide >= 15 ? (
                  <span className="disable"></span>
                ) : (
                  <Link className="active" to={datas[nextSlide].urlPath}></Link>
                )}
              </span>
            </div>
          </div>
        </>
      ) : (
        <p>{urlPath} is not a planet</p>
      )}
    </div>
  );
};

export default Paint;

Here is App.js parent component rendering the routes

import data from "./data.json";
import "./App.scss";
import { Switch, Route } from "react-router-dom";
import Menu from "./components/Menu/Menu";
import Gallery from "./components/Gallery/Gallery";
import Paint from "./components/Paint/Paint";
import { useState } from "react";

const App = () => {
  data.forEach((d) => {
    d["urlPath"] = d.name.replace(/\s/g, "-");
  });

  const [slideShow, setSlideShow] = useState(true);

  const handleSlideShow = () => {
    setSlideShow(!slideShow);
  };

  return (
    <div className="App">
      <div>
        <Menu datas={data} clickEvent={handleSlideShow} slideShow={slideShow} />
        <Switch>
          <Route exact path="/galleria">
            <Gallery datas={data} clickEvent={handleSlideShow} />
          </Route>
          <Route path="/galleria/:urlPath">
            <Paint datas={data} />
          </Route>
        </Switch>
      </div>
    </div>
  );
};

export default App;

Then the data.json file from where data values are coming :

[
  {
    "name": "Starry Night",
    "year": 1889,
    "description": "Although The Starry Night was painted during the day in Van Gogh's ground-floor studio, it would be inaccurate to state that the picture was painted from memory. The view has been identified as the one from his bedroom window, facing east, a view which Van Gogh painted variations of no fewer than twenty-one times, including The Starry Night. \"Through the iron-barred window,\" he wrote to his brother, Theo, around 23 May 1889, \"I can see an enclosed square of wheat ... above which, in the morning, I watch the sun rise in all its glory.\"",
    "source": "https://en.wikipedia.org/wiki/The_Starry_Night",
    "artist": {
      "image": "./assets/starry-night/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/starry-night/thumbnail.jpg",
      "hero": {
        "small": "./assets/starry-night/hero-small.jpg",
        "large": "./assets/starry-night/hero-large.jpg"
      },
      "gallery": "./assets/starry-night/gallery.jpg"
    }
  },
  {
    "name": "Girl with a Pearl Earring",
    "year": 1665,
    "description": "The painting is a tronie, the Dutch 17th-century description of a 'head' that was not meant to be a portrait. It depicts a European girl wearing an exotic dress, an oriental turban, and what was thought to be a very large pearl as an earring. In 2014, Dutch astrophysicist Vincent Icke raised doubts about the material of the earring and argued that it looks more like polished tin than pearl on the grounds of the specular reflection, the pear shape and the large size of the earring.",
    "source": "https://en.wikipedia.org/wiki/Girl_with_a_Pearl_Earring",
    "artist": {
      "image": "./assets/girl-with-pearl-earring/artist.jpg",
      "name": "Johannes Vermeer"
    },
    "images": {
      "thumbnail": "./assets/girl-with-pearl-earring/thumbnail.jpg",
      "hero": {
        "small": "./assets/girl-with-pearl-earring/hero-small.jpg",
        "large": "./assets/girl-with-pearl-earring/hero-large.jpg"
      },
      "gallery": "./assets/girl-with-pearl-earring/gallery.jpg"
    }
  },
  {
    "name": "Guernica",
    "year": 1937,
    "description": "The scene occurs within a room where, on the left, a wide-eyed bull stands over a grieving woman holding a dead child in her arms. In the center of the room a horse falls in agony with a large gaping hole in its side, as if it had just been run through by a spear or javelin. The horse appears to be wearing chain mail armor, decorated with vertical tally marks arranged in rows. A dead and dismembered soldier lies under the horse. The hand of his severed right arm grasps a shattered sword, from which a flower grows.",
    "source": "https://en.wikipedia.org/wiki/Guernica_(Picasso)",
    "artist": {
      "image": "./assets/guernica/artist.jpg",
      "name": "Pablo Picasso"
    },
    "images": {
      "thumbnail": "./assets/guernica/thumbnail.jpg",
      "hero": {
        "small": "./assets/guernica/hero-small.jpg",
        "large": "./assets/guernica/hero-large.jpg"
      },
      "gallery": "./assets/guernica/gallery.jpg"
    }
  },
  {
    "name": "Penitent Magdalene",
    "year": 1625,
    "description": "Penitent Magdalene is a painting by the Italian artist Artemisia Gentileschi. It hangs in Seville Cathedral. It has probably been in the cathedral since the late 17th century. The painting's first home was the collection of Fernando Enriquez Afan de Ribera, from 1626 to 1637. She returned to the subject later in the 1620s in Mary Magdalene as Melancholy.",
    "source": "https://en.wikipedia.org/wiki/Penitent_Magdalene_(Artemisia_Gentileschi)",
    "artist": {
      "image": "./assets/penitent-magdalene/artist.jpg",
      "name": "Artemisia Gentileschi"
    },
    "images": {
      "thumbnail": "./assets/penitent-magdalene/thumbnail.jpg",
      "hero": {
        "small": "./assets/penitent-magdalene/hero-small.jpg",
        "large": "./assets/penitent-magdalene/hero-large.jpg"
      },
      "gallery": "./assets/penitent-magdalene/gallery.jpg"
    }
  },
  {
    "name": "The Storm on the Sea of Galilee",
    "year": 1633,
    "description": "The painting, in vertical format, shows a close-up view of Christ's disciples struggling frantically against the heavy storm to regain control of their fishing boat. A huge wave beats the bow and rips the sail. One of the disciples is seen vomiting over the side. Another one, looking directly out at the viewer, is a self-portrait of the artist. Only Christ, depicted on the right, remains calm.",
    "source": "https://en.wikipedia.org/wiki/The_Storm_on_the_Sea_of_Galilee",
    "artist": {
      "image": "./assets/the-storm-on-the-sea-of-galilee/artist.jpg",
      "name": "Rembrandt"
    },
    "images": {
      "thumbnail": "./assets/the-storm-on-the-sea-of-galilee/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-storm-on-the-sea-of-galilee/hero-small.jpg",
        "large": "./assets/the-storm-on-the-sea-of-galilee/hero-large.jpg"
      },
      "gallery": "./assets/the-storm-on-the-sea-of-galilee/gallery.jpg"
    }
  },
  {
    "name": "The Great Wave off Kanagawa",
    "year": 1831,
    "description": "The Great Wave off Kanagawa (Japanese: 神奈川沖浪裏, Hepburn: Kanagawa-oki Nami Ura, lit. \"Under the Wave off Kanagawa\"), also known as The Great Wave or simply The Wave, is a woodblock print by the Japanese ukiyo-e artist Hokusai. It was published sometime between 1829 and 1833 in the late Edo period as the first print in Hokusai's series Thirty-six Views of Mount Fuji. The image depicts an enormous wave threatening three boats off the coast in the Sagami Bay (Kanagawa Prefecture) while Mount Fuji rises in the background.",
    "source": "https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa",
    "artist": {
      "image": "./assets/the-great-wave-off-kanagawa/artist.jpg",
      "name": "Hokusai"
    },
    "images": {
      "thumbnail": "./assets/the-great-wave-off-kanagawa/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-great-wave-off-kanagawa/hero-small.jpg",
        "large": "./assets/the-great-wave-off-kanagawa/hero-large.jpg"
      },
      "gallery": "./assets/the-great-wave-off-kanagawa/gallery.jpg"
    }
  },
  {
    "name": "Van Gogh Self-portrait",
    "year": 1889,
    "description": "This self-portrait was one of about 32 produced over a 10-year period, and these were an important part of his work as a painter; he painted himself because he often lacked the money to pay for models. He took the painting with him to Auvers-sur-Oise, near Paris, where he showed it to Dr. Paul Gachet, who thought it was \"absolutely fanatical\". Art historians are divided as to whether this painting or Self-portrait without beard is Van Gogh's final self-portrait. The art historians Ingo F. Walther and Jan Hulsker consider this to be the last.",
    "source": "https://en.wikipedia.org/wiki/Van_Gogh_self-portrait_(1889)",
    "artist": {
      "image": "./assets/van-gogh-self-portrait/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/van-gogh-self-portrait/thumbnail.jpg",
      "hero": {
        "small": "./assets/van-gogh-self-portrait/hero-small.jpg",
        "large": "./assets/van-gogh-self-portrait/hero-large.jpg"
      },
      "gallery": "./assets/van-gogh-self-portrait/gallery.jpg"
    }
  },
  {
    "name": "The Sleeping Gypsy",
    "year": 1897,
    "description": "The Sleeping Gypsy (French: La Bohémienne endormie) is an 1897 oil painting by French Naïve artist Henri Rousseau (1844–1910). It is a fantastical depiction of a lion musing over a sleeping woman on a moonlit night. Rousseau first exhibited the painting at the 13th Salon des Indépendants, and tried unsuccessfully to sell it to the mayor of his hometown, Laval. Instead, it entered the private collection of a Parisian charcoal merchant where it remained until 1924, when it was discovered by the art critic Louis Vauxcelles.",
    "source": "https://en.wikipedia.org/wiki/The_Sleeping_Gypsy",
    "artist": {
      "image": "./assets/the-sleeping-gypsy/artist.jpg",
      "name": "Henri Rousseau"
    },
    "images": {
      "thumbnail": "./assets/the-sleeping-gypsy/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-sleeping-gypsy/hero-small.jpg",
        "large": "./assets/the-sleeping-gypsy/hero-large.jpg"
      },
      "gallery": "./assets/the-sleeping-gypsy/gallery.jpg"
    }
  },
  {
    "name": "Lady with an Ermine",
    "year": 1489,
    "description": "The Lady with an Ermine (Italian: Dama con l'ermellino [ˈdaːma kon lermelˈliːno]; Polish: Dama z gronostajem) is a portrait painting widely attributed to the Italian Renaissance artist Leonardo da Vinci. Dated to c. 1489–1491, the work is painted in oils on a panel of walnut wood. Its subject is Cecilia Gallerani, a mistress of Ludovico Sforza (\"Il Moro\"), Duke of Milan; Leonardo was painter to the Sforza court at the time of its execution. It is one of only four surviving portraits of women painted by Leonardo, the others being Ginevra de' Benci, La Belle Ferronnière and the Mona Lisa",
    "source": "https://en.wikipedia.org/wiki/Lady_with_an_Ermine",
    "artist": {
      "image": "./assets/lady-with-an-ermine/artist.jpg",
      "name": "Leonardo da Vinci"
    },
    "images": {
      "thumbnail": "./assets/lady-with-an-ermine/thumbnail.jpg",
      "hero": {
        "small": "./assets/lady-with-an-ermine/hero-small.jpg",
        "large": "./assets/lady-with-an-ermine/hero-large.jpg"
      },
      "gallery": "./assets/lady-with-an-ermine/gallery.jpg"
    }
  },
  {
    "name": "The Night Café",
    "year": 1888,
    "description": "The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles. Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut. The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.",
    "source": "https://en.wikipedia.org/wiki/The_Night_Caf%C3%A9",
    "artist": {
      "image": "./assets/the-night-cafe/artist.jpg",
      "name": "Vincent Van Gogh"
    },
    "images": {
      "thumbnail": "./assets/the-night-cafe/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-night-cafe/hero-small.jpg",
        "large": "./assets/the-night-cafe/hero-large.jpg"
      },
      "gallery": "./assets/the-night-cafe/gallery.jpg"
    }
  },
  {
    "name": "The Basket of Apples",
    "year": 1893,
    "description": "The Basket of Apples (French: Le panier de pommes) is a still life oil painting by French artist Paul Cézanne, which he created c. 1893. The painting is particularly remarkable for its creative composition, which rejected realistic representation in favour of distorting objects to create multiple perspectives. This approach eventually influenced other art movements, including Fauvism and Cubism. It belongs to the Helen Birch Bartlett Memorial Collection of the Art Institute of Chicago.",
    "source": "https://en.wikipedia.org/wiki/The_Basket_of_Apples",
    "artist": {
      "image": "./assets/the-basket-of-apples/artist.jpg",
      "name": "Paul Cézanne"
    },
    "images": {
      "thumbnail": "./assets/the-basket-of-apples/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-basket-of-apples/hero-small.jpg",
        "large": "./assets/the-basket-of-apples/hero-large.jpg"
      },
      "gallery": "./assets/the-basket-of-apples/gallery.jpg"
    }
  },
  {
    "name": "The Boy in the Red Vest",
    "year": 1889,
    "description": "Cézanne painted four oil portraits of this Italian boy in the red vest, all in different poses, which allowed him to study the relationship between the figure and space. The most famous of the four, and the one commonly referred to by this title, is the one which depicts the boy in a melancholic seated pose with his elbow on a table and his head cradled in his hand. It is currently held in Zürich, Switzerland. The other three portraits, of different poses, are in museums in the US",
    "source": "https://en.wikipedia.org/wiki/The_Boy_in_the_Red_Vest",
    "artist": {
      "image": "./assets/the-boy-in-the-red-vest/artist.jpg",
      "name": "Paul Cézanne"
    },
    "images": {
      "thumbnail": "./assets/the-boy-in-the-red-vest/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-boy-in-the-red-vest/hero-small.jpg",
        "large": "./assets/the-boy-in-the-red-vest/hero-large.jpg"
      },
      "gallery": "./assets/the-boy-in-the-red-vest/gallery.jpg"
    }
  },
  {
    "name": "Arnolfini Portrait",
    "year": 1434,
    "description": "It is considered one of the most original and complex paintings in Western art, because of its beauty, complex iconography, geometric orthogonal perspective, and expansion of the picture space with the use of a mirror. According to Ernst Gombrich \"in its own way it was as new and revolutionary as Donatello's or Masaccio's work in Italy. A simple corner of the real world had suddenly been fixed on to a panel as if by magic ... For the first time in history the artist became the perfect eye-witness in the truest sense of the term\".",
    "source": "https://en.wikipedia.org/wiki/Arnolfini_Portrait",
    "artist": {
      "image": "./assets/arnolfini-portrait/artist.jpg",
      "name": "Jan van Eyck"
    },
    "images": {
      "thumbnail": "./assets/arnolfini-portrait/thumbnail.jpg",
      "hero": {
        "small": "./assets/arnolfini-portrait/hero-small.jpg",
        "large": "./assets/arnolfini-portrait/hero-large.jpg"
      },
      "gallery": "./assets/arnolfini-portrait/gallery.jpg"
    }
  },
  {
    "name": "Mona Lisa",
    "year": 1503,
    "description": "The Mona Lisa (/ˌmoʊnə ˈliːsə/; italian: La Gioconda [la dʒoˈkonda] or Monna Lisa [ˈmɔnna ˈliːza]) is a half-length portrait painting by Italian artist Leonardo da Vinci. Considered an archetypal masterpiece of the Italian Renaissance, it has been described as \"the best known, the most visited, the most written about, the most sung about, the most parodied work of art in the world\". The painting's novel qualities include the subject's enigmatic expression, the monumentality of the composition, the subtle modelling of forms, and the atmospheric illusionism.",
    "source": "https://en.wikipedia.org/wiki/Mona_Lisa",
    "artist": {
      "image": "./assets/mona-lisa/artist.jpg",
      "name": "Leonardo da Vinci"
    },
    "images": {
      "thumbnail": "./assets/mona-lisa/thumbnail.jpg",
      "hero": {
        "small": "./assets/mona-lisa/hero-small.jpg",
        "large": "./assets/mona-lisa/hero-large.jpg"
      },
      "gallery": "./assets/mona-lisa/gallery.jpg"
    }
  },
  {
    "name": "The Swing",
    "year": 1767,
    "description": "The painting depicts an elegant young woman on a swing. A smiling young man, hiding in the bushes on the left, watches her from a vantage point that allows him to see up into her billowing dress, where his arm is pointed with hat in hand. A smiling older man, who is nearly hidden in the shadows on the right, propels the swing with a pair of ropes. The older man appears to be unaware of the young man. As the young lady swings high, she throws her left leg up, allowing her dainty shoe to fly through the air.",
    "source": "https://en.wikipedia.org/wiki/The_Swing_(Fragonard)",
    "artist": {
      "image": "./assets/the-swing/artist.jpg",
      "name": "Jean-Honoré Fragonard"
    },
    "images": {
      "thumbnail": "./assets/the-swing/thumbnail.jpg",
      "hero": {
        "small": "./assets/the-swing/hero-small.jpg",
        "large": "./assets/the-swing/hero-large.jpg"
      },
      "gallery": "./assets/the-swing/gallery.jpg"
    }
  }
]

react-router reactjs
1 Answers

If I'm understanding your question/issue correctly, you want to render the Gallery and Paint components each on their own routes independently, and fix the slideshow linking from painting to painting. For this use the first routing snippet so they are independent routes and not nested.

<Routes>
  <Route
    path="galleria"
    element={<Gallery datas={data} clickEvent={handleSlideShow} />}
  />
  <Route path="/galleria/:urlPath" element={<Paint datas={data} />} />   
</Routes>

Next, the reason the next painting's urlPath is being appended as /galleria/Girl-with-a-Pearl-Earring/The-Great-Wave-off-Kanagawa is because react-router-dom v6 is capable of using absolute and relative paths. The difference between them is a leading "/" character. Paths starting with "/" are absolute paths, and without are relative.

Within Paint the next/previous buttons/links are specifying only the next/previous data[index].uriPath value instead of including the "/galleria" absolute path prefix.

<div className="column nav-links">
  <span className="prev-btn">
    {prevSlide <= -1 ? (
      <span className="disable"></span>
    ) : (
      <Link className="active" to={datas[prevSlide].urlPath}></Link>
    )}
  </span>
  <span className="next-btn">
    {nextSlide >= 15 ? (
      <span className="disable"></span>
    ) : (
      <Link className="active" to={datas[nextSlide].urlPath}></Link>
    )}
  </span>
</div>

Here datas[prevSlide].urlPath is a string value of the data element name, i.e. "Girl-with-a-Pearl-Earring", there is no leading "/" so the link is treated as a relative link.

There are a couple ways to resolve:

  1. Fix the relative linking, make the new path relative from the parent "directory":

    A relative <Link to> value (that does not begin with /) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that <Link>. It may contain .. to link to routes further up the hierarchy. In these cases, .. works exactly like the command-line cd function; each .. removes one segment of the parent path.

    <Link
  className="active"
  to={`../${datas[prevSlide].urlPath}`}
>
</Link>

    ...

    <Link
  className="active"
  to={`../${datas[nextSlide].urlPath}`}
>
</Link>

  2. Use an absolute path:

    <Link
  className="active"
  to={`/galleria/${datas[prevSlide].urlPath}`}
>
</Link>

    ...

    <Link
  className="active"
  to={`/galleria/${datas[nextSlide].urlPath}`}
>
</Link>
user_86908570
Related