Routing to new page in react - reactjs

Question

I am trying to pass a parameter to a url which is provided by the on click event ,and use it to route to a different page.
Places autocomplete returns a list of suggested places and a event listener is attached to it such that whenever a user clicks on it ,It will direct the user to a new Page.
I have tried attaching Link from react-router to redirect the current page to the new location but I am unable to pass the latitude and longitude as parameter
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

Answer 1

Instead if using Link, redirect user whenever PlacesAutocomplete got onSelect event
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)
Maybe you need to add loading indicator while geocodeByAddress still working