英文:
How can I dynamically create a Route in React?
问题
我在寻找有关这个主题的信息时遇到了困难，因为我不知道应该搜索什么，所以需要一些关于在哪里找到更多信息的指导。
假设我有一个/blog页面，我可以在上面创建博客。我点击一个按钮，打开一个表单，然后填写所有信息：博客标题、博客内容、今天的日期等等。然后，我提交这篇博文（我们称其为“第一篇博客”），然后被重定向回同样的/blog页面。现在，我可以点击我的第一篇博客的标题，它会将我重定向到一个新页面。例如：/blog/id=0001。
显然，我不需要每次创建新的帖子时手动创建一个全新的组件，因此React必须有一种动态创建页面并自动显示存储信息的方法，但我在寻找如何实现这些功能以及更重要的是如何在新页面中显示这些信息的信息方面遇到了困难。我假设我需要将所有信息存储在一个数组中，并根据id来显示这些信息。
英文:
I'm having trouble finding information on this subject because I don't know exactly what to search for and could use some direction on where I could find more information.
Let's say I have a /blog page where I'm able to create a blog. I click a button that opens a form and I fill out all the information: title of blog, blog message, today's date, etc. After that I submit the post (let's call it First Blog) and I get redirected back to the same /blog page. Now I'm able to click the title of my First Blog post and it redirects me to a new page. Example: /blog/id=0001.
I'm obviously not going to have to manually create a brand new Component each time I make a new post so React must have some way to dynamically create pages and automatically display stored information but I'm having trouble finding sources on how I can implement those features and more importantly what would be the best way to display that information in a new page? I'm assuming I would need to store everything in an array and make it display things based on an id.
答案1
得分: 2
你可以使用 useParams 来实现这个功能，详情请参考 https://reactrouter.com/en/main/hooks/use-params
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// 从 URL 中获取 userId 参数。
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 作为结果，然后可以使用它来获取数据库中的数据或执行其他操作。
这个方法被称为路由参数。
英文:
Yup you could use useParams for that, 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>
);
}
with :userId, you could think of it as a wild card. For example, if you redirect the user to /users/123, you ccan get useParams() to get the userId and get 123 as a result, which you could use it to fetch to DB or something else.
This method is called route parameters.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论