reactjs 如何在React中动态创建路由？

u91tlkcl 于 2023-02-18 发布在 React

关注(0)|答案(1)|浏览(157)

我很难找到关于这个主题的信息，因为我不知道确切地搜索什么，可以使用一些方向，在哪里我可以找到更多的信息。
假设我有一个可以创建博客的/blog页面，我单击一个按钮打开一个表单，然后填写所有信息：博客标题、博客消息、今天的日期等。之后我提交了帖子（* 我们称之为第一篇博客 *），然后我被重定向回同一个/blog页面。现在我可以单击我的第一篇博客帖子的标题，它会将我重定向到一个新页面。示例：/blog/id=0001.
很明显，我不需要在每次发布新的帖子时都手动创建一个全新的组件，所以React必须有某种方法来动态创建页面并自动显示存储的信息，但我很难找到如何实现这些功能的来源，更重要的是，在新页面中显示这些信息的最佳方式是什么？我假设我需要将所有内容存储在一个数组中，并使其基于id显示内容。

reactjs

来源：https://stackoverflow.com/questions/75491261/how-can-i-dynamically-create-a-route-in-react

1条答案

按热度按时间

dtcbnfnu1#

是的，您可以使用useParams来实现此目的，https://reactrouter.com/en/main/hooks/use-params

import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

对于:userId，您可以将其视为通配符。例如，如果您将用户重定向到/users/123，您可以获取useParams()以获取userId，结果为123，您可以使用它将其获取到DB或其他内容。
此方法称为路由参数。

赞(0）回复(0）举报 2023-02-18

我来回答

reactjs 如何在React中动态创建路由？

1条答案

相关问题

热门标签

最新问答