功能组件中的React URI参数

Question

从功能反应组件读取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);

严格的打字稿中的功能组件呢？

我们希望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

正如Domino987在答案中所说的那样，解决方案就是简单地扩展道具接口：

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

Answer 3

如果将组件(函数或类(包裹在用fiterrouter中，则提示将reteconponentProps从React-Router扩展到React-Router，就像您在几秒钟内一样，可以将其设置为corret-Rout。要访问正确的参数，您必须扩展这样的道具：

RouteComponentProps<{ id?: string; }>

这将使打字稿知道，您的匹配道具与字段ID，这是可选的。现在，您可以使用props.match.params.id访问它们。您还可以扩展它，以适合您的其他参数。希望这可以帮助。快乐的编码。

Answer 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