在功能组件中反应 URI 参数

Posted 2023-02-21

【中文标题】在功能组件中反应 URI 参数

【英文标题】：React URI params in functional components

【发布时间】：2019-12-10 05:41:45

【问题描述】：

从功能性 React 组件读取 URI 参数的正确方法是什么？

在 javascript 中，如果组件是 Switch 的直接子级，我们可以这样做：

function MyComponent(props) 
    const query = props.location.search;
    // ...

如果组件不是Switch 的直接子级，我们可以使用类：

class MyComponent extends Component<RouteComponentProps> 
    render() 
        const query = this.props.location.search;
        // ...
    


export default withRouter(MyComponent);

严格的 TypeScript 中的功能组件怎么样？

我们希望location 属性（以及任何其他属性，如果有更多）可用并由某些interface 或type 预定义，但由React 提供，而不是组件的用户。一个丑陋的 hack 是我们自己定义接口，然后期望它实际上是这样的。

【参考方案1】：

正如Domino987 在他们的回答中所说，解决方案是简单地扩展 props 接口：

import * as React from "react";
import withRouter, RouteComponentProps from "react-router";

function MyComponent(props: MyComponentProps) 
    const query = props.location.search;

    return <span>Query: query, myField: props.myField</span>;


interface MyComponentProps extends RouteComponentProps 
    myField: string;


export default withRouter(MyComponent);

【讨论】：

const query = props.match.params.id ==> id 是我的查询参数。它可以在功能组件中访问。非常感谢；

刚刚意识到，react16.13可以映射到Route中的 我们通过props得到的in child fuctional componet props.match.params.yourVarble。它正在工作

【参考方案2】：

//use useParams 
import  useParams  from 'react-router-dom';

const params = useParams()

// yuo can find all params from here
console.log(params)

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。您可以使用edit 按钮改进此答案以获得更多选票和声誉！

【参考方案3】：

如果您将组件（函数式或类）包装在 withRouter 中，您的 props 会从 react-router 扩展 RouteComponentProps，这可以正确设置，就像您在第二个示例中所做的那样。要访问正确的参数，您必须像这样扩展道具：

RouteComponentProps< id?: string; >

这会让 typescript 知道，你有一个带有字段 id 的匹配道具，这是可选的。您现在可以使用 props.match.params.id 安全地访问它们。您也可以扩展它，以适应您的其他参数。 希望这可以帮助。编码愉快。

【讨论】：

我找到了解决方案。现在，当我阅读本文时，我相信它在某种程度上指向了相同的方向。关键是用RouteComponentProps 扩展你的界面，它似乎工作。不过，我实际上并不了解 id?: string 部分。 RouteComponentProps 接口默认缺少某些属性吗？这就是为什么我们需要手动添加它？

因为您可以按照自己的意愿创建路线。因为匹配参数可以是任何你想要的： ，您必须告诉 typescript，您将其设置为什么。它也可以是 abalyticID 或 selectedAnalytic。

啊，是的。我刚刚从reacttraining.com/react-router/core/api/match 中读到match 之前不知道。

【参考方案4】：

对于功能组件，使用下面的代码

包括：

import  BrowserRouter as Router, Switch, Route, Redirect, useLocation
 from 'react-router-dom'

在你的函数组件中定义函数：

const useQuery= () => 
       return new URLSearchParams(useLocation().search);

调用函数：

let query = useQuery();

获取查询获取参数：

console.log("Get data==>",query.get('logout'));

URL: http://localhost:8080/login?logout=false

输出：

Get data==> false

【讨论】：

谢谢你的回答，看起来很酷，我想试试

即使我们不做useQuery，这个使用useLocation的解决方案仍然比withRouter的东西更优雅。