Different routers, different components, same path - reactjs

Question

I'm new to react. My app has array of restaurants with different categories. User should be able to go to page which loads all restaurants by categories or be able to go to restaurant's page.
Path /eat-out loads all available categories with a few suggestions for restaurants.
Category page works fine, but when I try to enter restaurant page it still loads category component instead of restaurant's.
I need to have a path eat-out/categories or eat-out/restaurant, where each would load a different component.
return (
<content className="content">
<Switch>
<Route exact path="/" render={() => <Dashboard />} />
<Route exact path="/reservations" render={() => <Reservations />} />
<Route exact path="/eat-out" render={() => <EatOut />} />
<Route
exact
path="/eat-out/:category"
render={() => <CategoryRestaurants />}
/>
<Route
exact
path="/eat-out/:restaurant"
render={() => <RestaurantPage />}
/>
</Switch>
</content>
);
};
Is it possible to do such routing?

Answer 1

This is possible if you know what the categories and/or restaurants are, but probably not what you really want:
import React from "react";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import "./styles.css";
const CategoryRestaurants = ({ category }) => <div>Category: {category}</div>;
const RestaurantPage = ({ restaurant }) => <div>Restaurant: {restaurant}</div>;
const KNOWN_CATEGORIES = ["cat1", "cat2", "cat3"];
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Switch>
<Route
exact
path="/eat-out/:category"
render={(props) => {
// Use the list of known categories to decide where to go
const param = props.match.params.category;
return KNOWN_CATEGORIES.includes(param) ? (
<CategoryRestaurants category={param} />
) : (
<RestaurantPage restaurant={param} />
);
}}
/>
</Switch>
</Router>
</div>
);
}
It would likely be better to have more defined URLs, such as /eat-out/category/:category and /eat-out/restaurant/:restaurant.

Answer 2

There are a few approaches here that might work for you.
Pattern Matching
If the values for category and restaurant have different patterns that you can check with regex, you can use pattern matching for your URL parameters, like so:
path="/eat-out/:category([A-Za-z]+)"
path="/eat-out/:restaurant([0-9]+)"
Static Value Matching
Or if you know all the values for category and restaurant ahead of time (i.e. the values are static and not pulled from the server/database), you can create a list like this and use regex:
const categories = ["Pizza", "Hamburgers", "Vegan"];
const categoryPattern = categories.join("|");
const restaurants = ["Tom's Sandwiches", "Super Restaurant Co."];
const restaurantPattern = restaurants.join("|");
path={`/eat-out/:category(${categoryPattern})`}
path={`/eat-out/:restaurant(${restaurantPattern})`}
Modify the Paths
If the values cannot be split by pattern and you don't know the values ahead of time and you don't mind changing the paths a bit, you can add a path before the URL parameter to tell the difference, like this:
path="/eat-out/categories/:category"
path="/eat-out/restaurants/:restaurant"
Internal Component Logic
Otherwise, you can create a single component that uses more complex logic to tell the difference between a category and a restaurant internally, then return either <CategoryRestaurants> or <RestaurantPage> depending on which is relevant.
For example you can try fetching category data based on the name/ID and if that fails, then fetch restaurant data instead. Alternatively, you can make a single route in your API that accepts a name/ID and returns the correct object, then just figure out what object type you received on the front-end and render accordingly.
So you would have something like this:
<Route
path="/eat-out/:categoryOrRestaurant"
render={() => <CategoryOrRestaurantPage/>}
/>