路由到React中的新页面

如何解决路由到React中的新页面

我正在尝试将参数传递给on click事件提供的url，并使用它来路由到另一个页面。 地点自动完成功能会返回建议地点的列表，并在其上附加一个事件侦听器，这样，只要用户单击它，它就会将用户定向到新的页面。 我尝试从react-router附加Link以将当前页面重定向到新位置，但是我无法将纬度和经度作为参数传递

class Searchbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }
 
  handleChange = address => {
    this.setState({ address });
  };
 
  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success',latLng))
      .catch(error => console.error('Error',error));
  };
 
  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps,suggestions,getSuggestionItemProps,loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',className: 'location-search-input',})}
            />
            <div className="autocomplete-dropdown-container">
            
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa',cursor: 'pointer' }
                  : { backgroundColor: '#ffffff',cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion,{
                      className,style,})}
                  >
                  <Link to=`/${pass latitude and long here}`> <span>{suggestion.description}</span></Link>    {//Not sure what to do here}
                  </div>
                );
              })}
            </div>
              </div>
            )}
          </PlacesAutocomplete>
        );
      }
    }
    export default Searchbar

解决方法

如果使用Link，则每当PlacesAutocomplete发生onSelect事件时重定向用户

2.6.3

也许您需要在import { withRouter } from 'react-router-dom' //... handleSelect = address => { geocodeByAddress(address) .then(results => getLatLng(results[0])) .then(latLng => this.props.history.push(`/?lat=${latLng.lat}&?lat=${latLng.lng}`)) .catch(error => console.error('Error',error)); }; //... export default withRouter(Searchbar) 仍在运行时添加加载指示器