How to change whole content of the page

Question

Lately i've been building page and i've come accross one simple problem. I want to change whole (mayby without navbar) content of the page depended on what user have clicked. But i dont know how to do it :(

I want to change whole content of div "halfDivided" on

Home

or

About

dependend on which link has been clicked

Plz help me guys :>

render() {
    return (
        <Router>
            <div className="mainDiv">
                <Navbar account={this.state.account} />
                <div className="d-flex halfDivided align-items-stretch ">
                <Link 
                to="/YourTokens" 
                className="col-sm-12 col-md-6 d-flex justify-content-center align-items-center"
                >
                    <h1 className="display-2 a text-center">Your Tokens</h1>
                </Link>
                
                <Link 
                  to="/YourColors" 
                  className="col-sm-12 col-md-6 d-flex justify-content-center align-items-center"
                >
                    <h1 className="display-2 a text-center">Your Colors</h1>
                </Link>
                </div>
                 <Switch>
                    <Route exact path="/YourTokens" component={YourTokens} />
                    <Route exact path="/YourColors" component={YourColors} />
                </Switch>
            </div>
        </Router>
    );
  }
}
function YourTokens() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function YourColors() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

Answer 1

Going from our discussion in the comments, hopefully this is what you're after:

render() {
    return (
        <Router>
            <div className="mainDiv">
                <Navbar account={this.state.account} />
                <div className="d-flex halfDivided align-items-stretch ">
                <Switch>
                    <Route exact path="/YourTokens" component={YourTokens} />
                    <Route exact path="/YourColors" component={YourColors} />
                    <Route path="/" component={MyDefaultComponent} />
                </Switch>
                </div>                     
            </div>
        </Router>
    );
  }
}
function YourTokens() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function YourColors() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function MyDefaultComponent() {
  return (
<>
    <Link 
                to="/YourTokens" 
                className="col-sm-12 col-md-6 d-flex justify-content-center align-items-center"
                >
                    <h1 className="display-2 a text-center">Your Tokens</h1>
                </Link>
                
                <Link 
                  to="/YourColors" 
                  className="col-sm-12 col-md-6 d-flex justify-content-center align-items-center"
                >
                    <h1 className="display-2 a text-center">Your Colors</h1>
                </Link>
</>
  );
}

What we're doing is creating a "default route" and rendering the links inside of it. This way the links will only be shown when none of the other routes are active.