Question

我对链接参数有疑问：

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

但是当您刷新页面时，您将失去选择的位置然后，您必须重新选择城市，因为链接仍然看起来像：File，尽管我有已经在我的通话链接中声明了请求查询（使用axios）在我的反应组件中。

所以我的问题是，如何在我的交换路由中声明它？我的演示在这里：https://shadi-final-project.herokuapp.com

Answer 1

查询参数可能有些棘手，但是您可以像这样使用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;

这是一个粗糙的示例，但它可以正常工作，请尝试对其进行调整，直到它满足您的需求为止。

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

1 个答案: