如何在Reactjs中制作可点击文本？

我很难弄清楚如何使文本可以点击并重定向到我的Dashboard.js和About.js。有人能帮我吗？我试着使用路由器，但不知道如何让它工作。谢谢

function App() {
  return (
    /** 
    <Router>
      <div className="App">
        <Nav/>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About}/>
          <Route path="/dashboard" component={Dashboard}/>
        </Switch>
      </div>
    </Router>
    */
    <div classname="App">
      <Container fluid>
        <Row style={{
            paddingTop: '250px',
          }}>
          <Col sm={3} style={{
              marginLeft: 'auto',
              marginRight: 'auto',
              marginRight: '0px'
            }}>
            <div class="container--wrap" style={{
                height: '60vh',
                borderRadius: '15px'
              }}>
              <p style={{
                  textAlign: 'center',
                  color: 'white',
                  paddingTop: '600px',
                  fontSize: '50px',
                  fontWeight: 'bolder'
                }}>
                  ABOUT
              </p>
            </div>
          </Col>
          <Col sm={3} style={{
              marginLeft: 'auto',
              marginRight: 'auto',
              marginLeft: '0px',
              marginRight: '0px',
            }}>
            <div class="container--wrap" style={{
                height: '60vh',
                borderRadius: '15px'
              }}>
              <p style={{
                  textAlign: 'center',
                  color: 'white',
                  paddingTop: '600px',
                  fontSize: '50px',
                  fontWeight: 'bolder'
                }}>
                SIGN UP
              </p> 
            </div>
          </Col>
          <Col sm={3} style={{
              marginLeft: 'auto',
              marginRight: 'auto',
              marginLeft: '0px'
            }}>
            <div class="container--wrap" style={{
                height: '60vh',
                borderRadius: '15px'
                }}>
              <p style={{
                  textAlign: 'center',
                  color: 'white',
                  paddingTop: '600px',
                  fontSize: '50px',
                  fontWeight: 'bolder'
                }}>
                DASHBOARD  
              </p> 
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

函数应用程序（）{
返回(
/** 
*/

关于


注册


仪表板

);
}

---

我试图使文本“关于”“注册”和“仪表板”可点击，并将页面更改为正确的js文件。

您可以用按钮将文本包装起来

const message = () => {
console.log("Hello World!") 
}
return (
<button onClick={message}> Press me to print a message! </button>
);

const message=（）=>{
log（“你好，世界！”）
}
返回(
按我来打印消息！
);

如果要使文本类似于锚定链接。您可以尝试使用React链接标记

<Router>
 <Link to='https://google.com/'><button>GO GOOGLE</button></Link>
</Router>

谷歌

或连接到另一个组件

<Link to={ROUTES.HOME}> //with ROUTES.HOME pointing to the location of your component in a <Route>
 Home
</Link>

//ROUTES.HOME指向组件在
家

这里有一个指向文档的链接。

您的

应该位于

的内部，然后您可以添加指向元素的链接，例如在about案例中：

<p style={{
              textAlign: 'center',
              color: 'white',
              paddingTop: '600px',
              fontSize: '50px',
              fontWeight: 'bolder'
            }}>
             <Link to={About}>
            ABOUT
            </Link>
          </p>

关于

如果您可以将代码粘贴到其中并在此处共享url，那么调试将很容易。您是否尝试过单击

onclick

和

history.push

？对于使用react router，您可以使用ABOUT Tag包装您的文本如何让它更改页面？