时间戳

首页 > 解决方案 > 使用请求查询参数，反应路由器

reactjs - 使用请求查询参数，反应路由器

问题描述

我对链接参数有疑问：

例如，我想要这样的东西， http ://my-project.com/list?city=whatever&limit=20 现在我已经完成了所有工作并制作了一个 html 选择标签当你选择任何城市时，你会找到你想要的

但是当您刷新页面时，您将丢失您选择的然后您必须再次重新选择城市，因为链接仍然看起来像：....com/list，尽管我已经在我的反应组件中的呼叫链接（使用 axios）中声明了请求查询。

所以我的问题是，我怎样才能在我的切换路由中声明它！？我的演示在这里：https ://shadi-final-project.herokuapp.com

标签： reactjsreact-router-v4query-parameters

解决方案

查询参数可能有点棘手，但你可以像这样使用 localStorage：

这只是一个例子

import React, { Component } from 'react';

const options = ["one", "two", "more", "set", "blah"]

class App extends Component {
  state = {
    selectedValue: localStorage.getItem("selectedValue") || null
  }

  onChange = (e) => {
    this.setState({ selectedValue: e.target.value });
    localStorage.setItem("selectedValue", e.target.value);
  }

  render() {
    const { selectedValue } = this.state;

    return (
      <select onChange={this.onChange} value={selectedValue ? selectedValue : options[0]}>
        {options.map((option, index) => <option key={index}>{option}</option>)}
      </select>
    );
  }
}

export default App;

这是一个粗略的例子，但它正在工作，试着调整它直到它适合你的需要。

推荐阅读