根据用户输入动态创建网页

Question

我正在开发一个 React 项目，用于安排小组会议。这个想法是用户可以在主页中创建一个俱乐部，然后导航到该俱乐部页面。一个用户可以是多个俱乐部的成员。如何动态更改俱乐部页面，以便显示该特定俱乐部的信息。您可以使用 router-dom 为每个俱乐部用户创建自定义 URL，还是我需要这样做以便单个俱乐部页面动态更改？我该怎么做呢？现在在我们的项目中，用户会看到俱乐部列表，他们可以单击其中一个来导航到所有俱乐部始终相同的俱乐部页面。俱乐部页面会采用单击的俱乐部的名称，并根据该名称动态更改自身吗？

我们目前使用 Google Firestore 作为数据库，如果有帮助的话。

现在，无论您选择哪个俱乐部，我们都会导航到相同的静态页面。我尝试寻找有关如何为每个用户创建的俱乐部页面创建自定义路径的解释，但我没有找到任何内容。这不可能吗？

    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

你应该做这样的事情。使用 :id 将这些路径设置为动态，然后当您访问它们时，您可以从 params 获取 id。

        <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;