ReactJS - 使用查询参数获取路由

Posted 2023-03-14

【中文标题】ReactJS - 使用查询参数获取路由

【英文标题】：ReactJS - Fetch Route with Query Parameters

【发布时间】：2018-06-25 19:22:06

【问题描述】：

我的 ReactJS 设置遇到问题，我试图在我的 url 中检索查询参数以附加到我的 fetch 函数中调用的 URL 路由。我应该使用一个包来实现这一点吗？ cheerio ReactJS 相关包？有什么方法可以在不使用反应路由器或 redux 的情况下做到这一点？我正在使用node-fetch 拨打我的路线。

例如下面是'http://localhost:3000/api?start_date=2017-11-05&end_date=2017-11-21'

class BlogFeedContainer extends React.Component
    constructor(props, context) 
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || blogs: [];
    

    fetchList() 
        fetch('http://localhost:3000/api')
            .then(res => 
                return res.json();
            )  
            .then(data => 
                console.log("API Fetch Data Below");
                console.log(data);
                this.setState( blogs: data.blog, user: data.user, csrf: data.csrfToken );
            ) 
            .catch(err => 
                console.log(err);
            );
    

    componentDidMount() 
        this.fetchList();
    

    render() 
        return (
            <div className="container">
                <BlogFeed ...this.state />
            </div>
        )
    
;

【问题讨论】：

这里有一些讨论+一些选项：github.com/github/fetch/issues/256

【参考方案1】：

不需要任何第三方库。只需使用window.location 对象：

window.location.search // => gives you query strings, starting with `?`