How does CityItem get /cities as its base URL and how does React know how to handle that generated URL?

[devYuraKim]

So because CityItem is rendered within CityList component that has /app/cities route (as we can see inside the App component), CityItem gets base URL of /app/cities.

App.jsx

<Route path="app" element={<AppLayout />}>
   <Route path="cities" element={<CityList cities={cities} isLoading={isLoading} />} />
   <Route path="cities/:id" element={<City />} />
</Route>

---

Therefore Link inside CityItem will generate URL like /app/cities/123123 (123123 is just a random number I chose as an id).

CityItem.jsx

<Link className={styles.cityItem} to={`${id}`}>
   <span className={styles.emoji}>{emoji}</span>
   <h3 className={styles.name}>{cityName}</h3>
   <time className={styles.date}>({formatDate(date)})</time>
   <button className={styles.deleteBtn}>&times;</button>
</Link>

---

And when that kind of URL(/app/cities/123123) is generated, it will render City component, as defined in the App component!

App.jsx

(...)
   <Route path="cities/:id" element={<City />} />
(...)