时间戳

首页 > 解决方案 > 如何更改页面的全部内容

reactjs - 如何更改页面的全部内容

问题描述

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

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

标签： reactjsreact-router

解决方案

从我们在评论中的讨论来看，希望这就是你所追求的：

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

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

推荐阅读