fix: use path id for Location page data

- Loads the page correctly when navigating from the Home page
- Loads the page correctly when navigating to the Location page directly

test: update LocationPage tests

cypress/e2e/LocationPage.cy.ts

@@ -4,12 +4,16 @@ export {};
 
 context('Given a user is on the Location page', () => {
   const baseUrl = Cypress.config('baseUrl');
+
+  context('When the user goes directly to a Location page', () => {
+    specify('Then the page loads correctly', () => {
+      cy.visit('/locations/32');
+    });
+  });
+
   context('When the user clicks the "Back to home" link', () => {
     specify('Then the user is directed to the Home page', () => {
-      cy.visit('/');
-      cy.findByRole('heading', {
-        name: /Basil's on Market/,
-      }).click();
+      cy.visit('/locations/32');
       cy.findByRole('link', {
         name: /Back to home/,
       }).click();
@@ -19,10 +23,7 @@ context('Given a user is on the Location page', () => {
 
   context('When the user clicks the "Add a review" link', () => {
     specify('Then the user is directed to the Home page', () => {
-      cy.visit('/');
-      cy.findByRole('heading', {
-        name: /Basil's on Market/,
-      }).click();
+      cy.visit('/locations/32');
       cy.findByRole('link', {
         name: /Add a review/,
       }).click();

src/components/HomePage/LocationCard.tsx

@@ -7,7 +7,6 @@ const LocationCardImage = ({ location }: { location: Location }) => {
       <Link
         to={location.locationURL}
         aria-label={`review page for ${location.name}`}
-        state={{ id: location.id }}
       >
         <img
           className="location-card__image"
@@ -23,11 +22,7 @@ const LocationHeading = ({ location }: { location: Location }) => {
   return (
     <div className="location-card__heading">
       <h3 className="location-card__name">
-        <Link
-          className="location-card__name-link"
-          to={location.locationURL}
-          state={{ id: location.id }}
-        >
+        <Link className="location-card__name-link" to={location.locationURL}>
           {location.name}
         </Link>
       </h3>

src/components/LocationPage/index.tsx

@@ -1,17 +1,12 @@
-import { useLocation as useWindowLocation } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { LocationHeader } from './LocationHeader';
 import { LocationDetails } from './LocationDetails';
 import { LocationReviews } from './LocationReviews';
 import { useLocations } from '../../useLocations';
 
 export function LocationPage() {
-  const {
-    state: { id },
-  } = useWindowLocation();
-
+  const id = window.location.pathname.split('/').pop() as string;
   const locations = useLocations();
-
   const location = locations[id];
 
   return (