如何更改页面的全部内容

Question

最近我一直在构建页面，我遇到了一个简单的问题。我想改变整个页面(可能没有导航栏)的内容取决于用户点击了什么。但是我不知道该怎么做：

我想把div "halfDivided“的全部内容改成

首页

或

关于

取决于所单击的链接

​

请帮帮我吧:>

​

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

根据我们在评论中的讨论，希望这就是你想要的：

​

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

​

我们正在做的是创建一个“默认路由”并渲染其中的链接。这样，只有在没有其他路由处于活动状态时，才会显示链接。