Estoy tratando de desarrollar una interfaz de usuario de aplicación de chat de reacción como WhatsApp. Es una aplicación de una página. Todos los componentes son componentes funcionales y estoy usando ganchos para manejar el estado local. Estoy usando React Router para manejar las rutas de la barra lateral, redux para agregar datos ficticios al estado de los contactos

Problema:

Cuando hago clic en el nombre del contacto en la lista de contactos, el componente de la barra lateral se carga y funciona bien aunque cambie la URL.

Pero cuando trato de actualizar en la misma URL. Me sale un error indefinido. Recibí una pista de que cuando actualizo la página en otra URL como http://localhost:3000/users/3 , el error se debe a que el componente se carga primero, y dado que está accediendo a datos del estado aunque el el estado de contacto está vacío.

A continuación se muestran los datos que estoy representando en el componente de la aplicación

 Index file <React.StrictMode> <Router> <Provider store={store}> <App /> </Provider> </Router> </React.StrictMode>,

 App component <> <Container fluid style={styles.app}> <Row> <Col style={styles.leftSidebar} className="leftSidebar"> <Row> <Row> <h2 style={{ color: 'white' }}>Profile Component</h2> </Row> <Row style={{ margin: 'auto' }}> <SearchBar searchChange={onSearchChange} /> </Row> </Row> <Row style={styles.contactList}> <ContactList contacts={filteredContacts} /> </Row> </Col> <Col> <Switch> <Route path="/conversations/:id" render={(props) => ( <ConversationList {...props} contacts={contacts} setContacts={setContacts} /> )} /> <Route component={NoConvo} /> </Switch> </Col> </Row> </Container> </>

He intentado muchos enfoques diferentes, pero ninguno parece funcionar. Solo quiero que cuando actualice en otra ruta, los datos se carguen primero y luego el componente use los datos que manejarán el error indefinido