페이지의 전체 내용을 변경하는 방법

페이지의 전체 내용을 변경하는 방법

최근에 나는 페이지를 작성하고 있는데 한가지 간단한 문제가 생겼다.사용자가 클릭하는 내용에 따라 페이지의 전체(내비바 제외) 내용을 변경하고 싶다.하지만 어떻게 해야 할지 모르겠다 :(

div "HalfDivided"의 전체 내용을 다음에 대해 변경하고 싶다.

홈

or

정보

dependend on which link has been clicked

plz 도와줘 얘들아 :>

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>
  );
}

코멘트에서 논의한 내용 중에서 다음 사항을 살펴보십시오.

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>
</>
  );
}

우리가 하는 일은 "기본 경로"를 만들고 그 안에 있는 링크를 렌더링하는 것이다.이러한 방식으로 링크는 다른 경로가 활성화되지 않은 경우에만 표시된다.

참조URL: https://stackoverflow.com/questions/58384188/how-to-change-whole-content-of-the-page