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

时间:2018-01-17 01:02:05

标签: reactjs node-fetch

我遇到了我的ReactJS设置问题,我试图在我的网址中检索查询参数,以附加到我的获取功能中调用的URL路由。我应该使用一个包来实现这个目标吗? cheerio与ReactJS相关的包裹?没有使用反应路由器或redux的任何方法吗?我正在使用node-fetch拨打我的路线。

E.g。以下是'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>
        )
    }
};

1 个答案:

答案 0 :(得分:1)

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

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