What is the correct way to fetch data and pass it to a route with react router?

L

lucas.mdiniz

Guest
In my App.js I have the following routes:

<Switch>
<Route exact path='/' render={() => <Home palettes={this.state.palettes}/>}/>
<Route exact path='/palette/:id' render={(urlParams) => <Palette palettes={this.state.palettes} urlParams={urlParams}/>}/>
</Switch>


I'm fetching the data and updating it on the state:

async componentDidMount(){
this.setState({ isLoading: true });

const response = await axios.get(API + DEFAULT_QUERY);

this.setState({
palettes: [...response.data],
isLoading:false
});
}


The thing is that if I go direct to the url '/palette/:id', componentDidMount is not triggered. How can I fetch the data in a way it can be passed to the routes and still get the data if I go direct to the route url?

Continue reading...
 
Top