How to resolve undefined match props in React and React-router - reactjs

Question

When I click to the <Link to={"/weather/" + loc.id} onClick={props.findCurrentWeather}> in SearchBar component. I got the error :
Cannot read property 'params' of undefined
My App.js class component :
class App extends Component {
state = {
locations: undefined,
current: undefined,
...
}
findCurrentWeather = async () => {
let id = this.props.match.params.id; //this is the concerned line. My applicatioon stops here
const data = await fetch(`https://api.weather.com/v1/current.json?key=${api_key}&q=${id}`);
const current_weather = await data.json();
console.log(current_weather);
}
render() {
return (
<BrowserRouter>
<Navbar />
<SearchBar locations={this.state.locations} findCurrentWeather={this.findCurrentWeather} />
<Breadcrumb />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/weather/:id" component={Home} /> //This is the route
<Route path="/about" component={About} />
</Switch>
</BrowserRouter>
)
} // render
} // class
SearchBar functionnal component :
const SearchBar = (props) => {
const searchResult = props.locations ? (
props.locations.map((loc) => {
return (
<li className="search-item" key={loc.id}>
<Link to={"/weather/" + loc.id} onClick={props.findCurrentWeather}> //I call the function from App.js here
<span id="city">{loc.name}</span>
</Link>
</li>
) // return
})
) :
(<li className="search-item">
<Link to={"#"}>
<span>No result</span>
</Link>
</li>);
return (
<form onSubmit={props.searchLocation}>
<input type="text" name="search" id="searchInput" className="search-input"/>
<div className="search-result">
<ul className="search-list" id="searchList">
{searchResult}
</ul>
</div>
</div>
</form>
)
} //fun
export default SearchBar;
I don't know why the props in this.props.match.params.id is undefined

Answer 1

Your component needs the match as a props which you need to pass it. The render prop of Route component takes a function which passes props as the first argumment. The match is one of the props that the Route gives you. For example -
const App = () => (
<div>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/weather/:id" render={ ({match}) => <Home id={match.params.id}/> } /> //This is the route
<Route path="/about" component={About} />
In your example, the SearchBar needs to be inside the Home component since the id param is passed in the route to the Home component.
You may want to check this link for understanding better how the match param works in react-router.

Answer 2

So the thing is your page renders twice first time the id is null while second time it has the value.If you console.log(props.match) it will show you the object.
So to skip this error you can use ternery operator so your id will be equal to a value once it is loaded.Hopefully it helps.Inside findCurrentWeather function use this.
const id = props.match ? props.match.params.id : null
console.log(id);

Answer 3

You need to wrap your component with withRouter to be able to acceess the router from a component not rendered by a Route and move findCurrentWeather inside the SearchBar component.
// Searchbar.js
import { withRouter } from "react-router";
...
export default withRouter(SearchBar);

Answer 4

The problem here is the context of this in function findCurrentWeather. Since it is an arrow function it holds the instance of component where it is defined, not of the calling component. Read more about the difference here.
Now you have two options:
You shift the method definition to SearchBar component.
Make findCurrentWeather method as normal javascript function something like given below.
async function findCurrentWeather () {
let id = this.props.match.params.id; //this is the concerned line. My applicatioon stops here
const data = await fetch(`https://api.weather.com/v1/current.json?key=${api_key}&q=${id}`);
const current_weather = await data.json();
console.log(current_weather);
}