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

u91tlkcl  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(158)

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

dtcbnfnu

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或其他内容。
此方法称为路由参数。

相关问题