在功能组件中react URI 参数

IT技术 reactjs typescript url react-router url-parameters
2021-04-26 15:38:02

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

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

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

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

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

export default withRouter(MyComponent);

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

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

4个回答

正如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);

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

const params = useParams()

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

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

RouteComponentProps<{ id?: string; }>

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

对于功能组件，请使用以下代码

包括：

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
其它你可能感兴趣的问题
上一篇伪选择器在样式化组件中的工作方式是否与具有 unicode 字符的 css 中的工作方式相同 下一篇如何使用 React-Query 处理多个查询