everyone person who is new to JS here. I am working on a project in ReactJS 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>
    );
    }
    }