Reactjs 使用react路由器获取数据并将其传递到路由的正确方法是什么？

在我的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>

---

问题是，如果直接转到url“/palete/：id”，则不会触发componentDidMount。如果直接转到路由url，如何获取数据并仍然获取数据？

毕竟，对于react router componentDidMount（），首先在子路由中触发，然后在父路由中触发，所以问题是代码中的逻辑

我使用的解决方案是检查从API fetch接收数据的道具是否为空，如果不是，则显示一些加载，如果有数据，则渲染它。这是因为在父组件中的状态更改后，子路由也会重新渲染

---

我仍然不知道这是否是最好的方法，但它目前正在发挥作用，我学到了更多关于React生命周期方法的知识。

为什么不触发？你能提供问题的在线工作示例吗？以下是在线示例。如果在调色板中单击，代码将正常渲染，但如果重新加载，则数据将丢失。我认为react路由器在转到其他路由时不会触发它。您的示例是使用本地服务器：：在进入调色板url后是否尝试刷新页面？您可以通过anydesk或TeamViewer进行远程访问吗？

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

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

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