Как правильно выбрать данные и передать их на маршрут с помощью активного маршрутизатора?

Question

В моем App.js у меня есть следующие маршруты:

<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>

Я выбираю данные и обновляю их в состоянии:

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

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

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

Дело в том, что еслиЯ иду прямо к URL '/ palette /: id', componentDidMount не срабатывает. Как я могу получить данные таким образом, чтобы они могли быть переданы на маршруты, и по-прежнему получать данные, если я иду прямо к URL-адресу маршрута?

Answer 1

В конце концов было так, что для реагирующего маршрутизатора componentDidMount () запускается сначала в дочерних маршрутах, а затем в родительском маршруте, поэтому проблема заключалась в логике в моем коде.

Решение, которое яиспользуется для проверки того, пустые ли реквизиты, которые получают данные из выборки API, и если нет, я показываю некоторую загрузку, если есть данные, которые я отображаю. Это работает, потому что дочерний маршрут также повторно визуализируется после изменения состояния в родительском компоненте.

Я до сих пор не знаю, является ли это наилучшим способом сделать это, но сейчас он работает, и яузнал немного больше о методах жизненного цикла React.