Dynamically creating webpages based on user input

Question

I am working on a project in React for scheduling group meetings. The idea is that users can create a club in the homepage, and then navigate to that club page. A user can be part of multiple clubs. How do I dynamically change the club page so that it shows the information of that specific club. Can you create custom URLs with router-dom for each club users create, or do I need to make it so that the single club page dynamically changes? How would I do that? Right now in our project, a user sees a list of clubs and they can click on one of them to navigate to a club page that is always the same for all clubs. Would the club page take the name of the clicked club, and dynamically change itself based on that?

We currently use Google Firestore as a database, if that helps.

Right now we navigate to static pages that are the same no matter which club you pick. I have tried looking for an explanation on how to make custom paths for each user created club page, but I haven't found anything. Is that not possible?

    render() {
    return (
    \<div className="App" data-theme={this.state.isDark ? "dark" : "light"} data-testid='app'\>
    \<Router\>
    \<Routes\>
    \<Route exact path="/" element={\<LoginSignup/\>}/\>
    \<Route path="EmailVerification" element={\<EmailVerification/\>}/\>
    \<Route path="Homepage" element={\<PrivateRoute\>\<Homepage/\>\</PrivateRoute\>}/\>
    \<Route path="/Homepage/Clubs" element={\<PrivateRoute\>\<Clubs/\>\</PrivateRoute\>}/\>
    \<Route path="/Homepage/Clubs/MemberList" element={\<PrivateRoute\>\<MemberList/\>\</    PrivateRoute\>}/\>
    \<Route path="/Homepage/Clubs/ActivityList" element={\<PrivateRoute\>\<ActivityList/\>\</ PrivateRoute\>}/\>
    \<Route path="\*" element={\<p\>There's nothing here: 404!\</p\>} /\>
    \</Routes\>
    \</Router\>
    \</div\>
    );
    }
    }

Answer 1

You should do something like this. Set those paths as dynamic using :id, and then when you access them, you can have the id from params.

        <Route path="/Homepage/Clubs/:clubId" element={<PrivateRoute><ClubDetails /></PrivateRoute>} />
        <Route path="/Homepage/Clubs/:clubId/MemberList" element={<PrivateRoute><MemberList /></PrivateRoute>} />
        <Route path="/Homepage/Clubs/:clubId/ActivityList" element={<PrivateRoute><ActivityList /></PrivateRoute>} />





import React from 'react';
import { useParams } from 'react-router-dom';

const ClubDetails = () => {
const { clubId } = useParams();

return (
   <div>
      <h1>Club Details</h1>
      <p>Details for club ID: {clubId}</p>
      {/* Add logic to fetch and display details for the specific club */}
   </div>
     );
 };

 export default ClubDetails;