如何更改页面的全部内容

debugcn 发表于 Dev

拉夫3n

最近，我一直在构建页面，并且遇到了一个简单的问题。我想根据用户单击的内容更改页面的整个内容（可能没有导航栏）。但是我不知道该怎么做:(

我想更改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>
  );
}

克里斯

从我们在评论中的讨论开始，希望这是您追求的目标：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。