Can I use react or CSS to target a specific component to change onclick?

Question

I'm trying to have a navbar that when a link on it is clicked, it renders the new component into the component B box in the picture and nowhere else on the screen (aka everything else stays the same). Do I need react router for this or can I do this using straight up React and CSS?

Aka I click link 1, or link 2 or link 3 and the result shows up in Component box B.

Answer 1

Do I need react router for this or can I do this using straight up React and CSS?

You could do it w/o react-router by making some statefull component that uses links to change its path and selecting component to render based on this path . In the end react-router is using React.

handleLinkClick(e, path) {
  ev.preventDefault()
  this.setState({path})
}

renderBComponent() {
   const { path } = this.state;

   const ComponentToRender = {path1: ComponentB1, path2: ComponentB2, etc}
   return <ComponentToRender />
}

But you'd better use react-router :) to avoid reinventing the wheel.