时间戳

首页 > 解决方案 > 带有参数的 Reactjs 书签 url

reactjs - 带有参数的 Reactjs 书签 url

问题描述

我有一个搜索组件，用户在其中键入企业的名称和位置，这将被发送到服务器以检索与名称和位置值匹配的数据。
一旦我收到来自服务器的响应，我React Router用来重定向到Search Page带有参数的组件，路由器也允许我传递数据，props.location.state所以我能够使用Search Page下面组件中的数据是代码

 handleSearchSubmit = (e) => {
        e.preventDefault()
        Axios.post('http://localhost:9000/api/search', {
           name : this.state.name,
           location: this.state.location 
        })
        .then(res => {
            const {history} = this.props
            history.push({
                pathname: '/search',
                search: `?name=${this.state.name}&location=${this.state.location}`,
                state: { data: res.data, name: this.state.name, location: this.state.location  }
            })
        })
    }

我的问题是：

如果我的用户想将 url 加入书签，那么在 URL GET 请求上从服务器检索数据的最佳方法是什么>

我正在考虑解析反应路由器作为道具发送的搜索参数（如下）并重新发送另一个 http ，但我不知道如何以及这是否是最好的方法

location:
hash: ""
key: "qxte3t"
pathname: "/search"
search: "?name=Restaurantf&location=Paris"

标签： reactjshttpreact-router

解决方案

你的思维过程是正确的。当您的组件在用户单击带有书签的链接后安装时，您应该检查现有状态（例如现有结果列表，以防您从应用程序的其他地方到达那里）。
如果状态为空，您可以使用查询字符串之类的东西来解析 URL 参数并对后端进行 http 调用并显示结果。

推荐阅读