已解决：将参数添加到 url 反应路由器

将参数添加到 URL React Router 的主要问题是参数很容易被用户操纵。 这可能会导致安全问题，因为恶意用户可能会使用这些参数来访问未经授权的资源或数据。 此外，如果未正确验证参数值，可能会导致应用程序出现意外行为。 最后，如果添加的参数过多，可能会因 URL 的复杂性增加而导致性能问题。

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. import { BrowserRouter as Router, Route, Link, useParams } from “react-router-dom”；
// 这将从将在此代码中使用的 react-router-dom 库中导入组件。

2. // 这将创建一个路由器组件，它将处理不同路由之间的导航。

3. // 这将创建一个动态参数为“用户名”的路由。

4. // 当这条路由匹配时，渲染 User 组件。

5. John // 这将创建一个指向 /user/john 路由的链接，该路由将在单击时以“john”作为用户名参数呈现用户组件。

6. function User() { //这是一个函数式组件，它将用户名作为参数，并在通过单击其上方的链接调用时将其呈现在 div 标签内。

7.让{用户名} = useParams(); //这使用解构从 useParams() 获取对用户名的访问。

8.返回（

{用户名}

); //这将返回一个 div 元素，其中包含传递给用户名的任何值，在本例中为“john”。

什么是反应路由器

React Router 是 React 应用程序的路由库。 它提供了创建具有在不同页面之间导航的单页应用程序 (SPA) 所需的核心组件和功能。 它允许开发人员定义路由，即映射到应用程序中特定组件的路径。 React Router 还提供了重定向、动态路由匹配和查询参数等功能。

URL 的参数

React Router 中的 URL 参数允许开发人员将动态数据从 URL 传递到 React 组件。 这对于创建可用于根据 URL 中传递的参数显示不同内容的动态路由很有用。 例如，像“/user/:id”这样的路由可用于显示用户配置文件页面，并在 URL 中传递一个 id 参数。 参数还可用于过滤数据或其他需要来自 URL 的动态数据的操作。

如何在 React 中向 URL 添加参数

在 React Router 中向 URL 添加参数是使用“params”对象完成的。 该对象允许您传入将添加到 URL 的键值对。 要添加参数，只需将其添加到 params 对象，如下所示：

const params = { param1: 'value1', param2: 'value2' };

然后，在创建路线时，您可以像这样将 params 对象作为参数传递：

导航到此路由时，参数将被添加到 URL。

相关文章：

发表评论