已解决：反应路由器 url 参数

与 React Router URL 参数相关的主要问题是它们很难在动态路由中使用。 这是因为 URL 参数是静态的，在创建路由后无法更改。 这意味着如果用户需要访问具有不同参数的不同页面，他们将需要为每个参数组合创建一个新路由。 此外，在使用 URL 参数时，可能很难跟踪所有可能的组合并确保每个组合都由路由器正确处理。

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

这段代码正在设置一个 React Router 来渲染一个带有来自 URL 的用户名的页面。

1. 第一行从 React Router DOM 库导入组件。
2. App 函数返回 Router 组件，其中包含一个 Route 组件，它指定任何以“/user/”开头的 URL 都应该呈现 UserPage 组件。
3. UserPage 函数使用 useParams() 从 URL 中获取用户名，然后使用该用户名呈现问候语。

网址参数

React Router 中的 URL 参数是作为 URL 的一部分传递给路由的数据片段。 它们允许开发人员将动态信息传递给路由，例如 ID 或查询字符串。 这可用于创建动态路由，可用于显示数据库中的特定项目或根据用户输入过滤内容等。 React Router 提供了访问和操作 URL 参数的工具，使您可以轻松地在应用程序中使用它们。

你如何从 React 中的路由获取 URL 参数

在 React Router 中，您可以使用 useParams 挂钩从路由访问 URL 参数。 此挂钩返回一个对象，其中包含 URL 参数的键值对。 例如，如果您的路由是 /user/:id，您可以使用 useParams().id 访问 id 参数。

相关文章：

发表评论