user4790067 user4790067 - 1 year ago 47
React JSX Question

Navigate to a component without changing url in ReactJS

I want to navigate from one component to another ,as in, upon a button click in component1 , we should be redirected to component2 without having to use this.navigation.navigate() as this requires specifying a new URL. I want the URL to remain same and I do not want to use react-router. Is there a way to do this?

The behavior ideally is that a button click in component1 will render component2 in the place of component1 which takes up the whole screen. In a way component1 would cause component2 to render. But I do not want the user to have access to component2 directly. Hence I do not want a change in the URL. Would containers still be the way to go?

Answer Source

You need to return that component witch appropriate by your condition like this:

class Container extends Component {
  render() {
    let cond = this.props.condition
    return (
      { cond ? <Component1/> : <Component2/> }
    )
  }
}

EDIT: switch may be like this:

class Component1 extends Component {
  render() {
    return (
      <button onClick={this.props.onDone}/>
    )
  }
}


class Container extends Component {
  constructor(props) {
    this.state = { done: false }
  }

  render() {
    let cond = this.state.done
    return (
      { cond ?
        <Component1 onDone={()=>this.setState({done:true})}/> :
        <Component2/>
      }
    )
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download