score:0

Accepted answer

it feels like you would want the contacts as part of the state. in that case the code would be:

state = { contactls: getcontactsls()}

but as we are calling values from localstorage a more appropriate place might be componentdidmount() method.from react docs

avoid introducing any side-effects or subscriptions in the constructor. for those use cases, use componentdidmount() instead.

then the code would be

componentdidmount(){
    const contacts =  getcontactsls()
    this.setstate({ contacsls: contacts })
}

don't forget to change to this.state.contactsls

<route exact path="/" component={() => <contacts contacts={this.state.contactsls} />} />

====

ps
another problem i can see in the existing code is the misuse of component constructor.
this is not obvious but the line

contactsls = getcontactsls();

is equivalent to

constrcutor(){
   this.contactls = getcontactls();
}

from react documentation we read

typically, in react constructors are only used for two purposes:
- initializing local state by assigning an object to this.state.
- binding event handler methods to an instance.

score:0

you could use <redirect> component from react-router-dom package. to get it working you initially setstate where redirect is set to false.

this.state = {
  redirect: false
}

once the addcontact opeartion is done, update the state

this.setstate({
  redirect: true
})

inside of your addcontact component, the state will decide if it has to show the actual component or to redirect to the attached path. something like this:

import {redirect } from 'react-router-dom';
class addcontact extends react.component {
  //add the initial state
  // addcontact operation
  render(){
    if(this.state.redirect)
      return <redirect to="/" />
    return (
       //the markup for addcontact
    )

  }
}

Related Query

More Query from same tag