刷新页面后即显示结果

Question

我使用reactjs制作了一个应用程序。为了使搜索工作，我从API获取结果并将结果显示给页面。但是当我刷新页面时，我收到一个错误（找不到404）。即使刷新页面后，我现在如何才能显示相同的内容？

以下是我的代码

form.js

onSubmit = (e) => {
    e.preventDefault();
    const originwithCountry = e.target.Origen.value;
    const originwithCity = originwithCountry.split(', ')[0];
    const cityFrom = base64.encode(originwithCity);
    const paisFr = 'España';
    const paisFrom = base64.encode(paisFr);
    const DestinationWithCountry = e.target.Destino.value;
    const DestinationWithCity = DestinationWithCountry.split(', ')[0];
    const cityTo = base64.encode(DestinationWithCity);
    const paisT = 'España';
    const paisTo = base64.encode(paisT);
    const startDate = (new Date(e.target.date_input.value).getTime() / 1000);
    this.props.showResultofCar(cityFrom, cityTo, startDate, paisFrom, paisTo);
    browserHistory.push(
      `/car/?cityFrom=${cityFrom}&cityTo=${cityTo}&startDate=${startDate}
      &paisFrom=${paisFrom}&paisTo=${paisTo}`
    );
    }

actions.js

export function showResultofCar(cityFrom, cityTo, date, paisFrom, paisTo) {
  return (dispatch) => {
    dispatch({ type: 'CAR_FETCH_START' });
    const token = localStorage.getItem('token');
    return axios.get(`${API_URL}/newoffers/car/{"cityFrom":"${cityFrom}","cityTo":"${cityTo}","date":${date},"paisFrom":"${paisFrom}","paisTo":"${paisTo}"}.json/null/${token}`)
      .then((response) => {
        setTimeout(() => {
          dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
        }, 1500);
      })
      .catch((err) => {
        dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
      });
  };
}

routes.js

<Route path="/" component={App}>
  <Route component={HomeLayout}>
    <Route path="coche" component={CocheForm} />
  </Route>
    <Route component={ResultLayout}>
      <Route path="car" component={CarResult} />
    </Route>
</Route>

carResult组件看起来像是从mapStateToProps传递道具

<CarResult
  origen={Origen}
  destino={Destino}
  carResult={carResult}
/>

更新

我使用了persistedState和浏览器localstorage，现在可以使用，但我不能使用游侠，路线也不会在地图中显示。

store.subscribe(() => {
  saveState({
    getCarResult: store.getState().getCarResult,
    locale: store.getState().locale,
  });
}); 

轿厢filter.js

 class CarResultFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values1: {
        min: 0,
        max: 100,
      },
      values2: {
        min: 0.00,
        max: 23.40,
      },
    };
  }

  handleValuesChange(component, values1) {
    this.setState({
      values1,
    });
    this.props.getFilteredResults(this.state.values1);
  }

  handleValues2Change(component, values2) {
    this.setState({
      values2,
    });
    this.props.getTimeFilteredResults(this.state.values2);
  }

  render() {
    const { origen, daterange } = this.props;
    const { focusedInput } = this.state;
    const dateString = daterange && (new Date(daterange)).toString();
    const dateWithMonth = dateString && moment(dateString).format(' DD/MM ');
    return (
      <div className="car-result-filter">
        <div className="container-fluid">
          <div className="row">
            <div className="col-xs-12 col-sm-12 col-md-6">
              <div className="row filter-range">
                <div className="col-xs-12 col-sm-12 col-md-5">
                  <InputRange
                    maxValue={100}
                    minValue={0}
                    labelSuffix="&euro;"
                    value={this.state.values1}
                    onChange={this.handleValuesChange.bind(this)}
                  />
                </div>
                <div className="col-xs-12 col-sm-12 col-md-5">
                  <InputRange
                    maxValue={23.40}
                    minValue={0.0}
                    labelSuffix="h"
                    value={this.state.values2}
                    onChange={this.handleValues2Change.bind(this)}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const ApartmentFormInCarFilter = reduxForm({
  form: 'ApartmentFormInCarResultFilter',
  destroyOnUnmount: false,
})(CarResultFilter);

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ getFilteredResults, getTimeFilteredResults }, dispatch);
}

export default connect(null, mapDispatchToProps)(ApartmentFormInCarFilter);