Seeking to create a system where clicking an item in the navbar loads a new component on the screen, I am faced with the challenge of maintaining state while also updating the URL. Allow me to provide more details:
Below is my current navbar code snippet:
<Nav pullRight activeKey="1" onSelect={k => this.handleSelect(k)}>
<NavItem eventKey={1} href={'/component1'}>
Component 1
</NavItem>
<NavItem eventKey={2} href={'/component2'}>
Component 2
</NavItem>
</Nav>
This is the handleSelect function I am using:
handleSelect(eventKey, event) {
this.setState({
componentToLoad: eventKey
});
event.preventDefault();
}
Within my render method, the conditional statement looks like this:
render() {
if(this.state.componentToLoad === 'component1'){
return (<Component1/>);
} else if(this.props.componentToLoad === 'component2'){
return (<Component2/>);
}
The issue arises when the href attribute updates the URL upon clicking, causing a page reload and loss of state. As a result, it always defaults to loading component 1 due to the initial set value. Removing the href solves the problem, but does not align with the desired URL structure.
How can I achieve the desired component loading functionality, maintain state, and update the URL accordingly? Your insights are greatly appreciated.
Thank you