Question

从功能性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提供，而不是由用户提供组件。一个丑陋的破解方法是自己定义接口，然后期望它实际上就是这种方式。

Answer 1

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

const params = useParams()

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

Answer 2

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

包括：

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

Answer 3

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

RouteComponentProps<{ id?: string; }>

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

Answer 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);

在功能组件中反应URI参数

4 个答案: