如何在Reactjs中的按钮单击上重定向到另一个页面

我想使用react创建一个基本的web应用程序。我已经实现了创建按钮。我想在点击按钮时重定向到另一个页面。下面是我的App.js代码

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <p>
          <buttontoolbar>
            <button const path = '/Components'> Click Me </button>
          </buttontoolbar>
        </p>
     </header>
    </div>

  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
函数App（）{
返回(

点击我

);
}
导出默认应用程序；

当我点击“点击我”按钮时，它应该重定向到Components.js。下面是Components.js的代码

import React from "react"

function app(){
 return(
  <p>
  Welcome to the world. 
  </p>
 )
}

export default app

从“React”导入React
函数app（）{
返回(

欢迎来到世界。

)
}
导出默认应用程序

---

很久以前，我在ASP.NET中做过这些事情。在这里，我使用了

Response.redirect

来重定向页面，非常简单。由于我是新的反应，我对此一无所知。React中有类似的内容吗？

使用React router dom包定义路由，然后在按钮的onClick事件上使用以下方法之一

this.props.history.push（“组件路径”）

browserHistory对象（在react router包中）

---

请参阅此

基本上没有“页面”。这个想法更多的是“显示”或“隐藏”组件，这会给用户一个页面/视图的印象

在React中实现路由的最简单方法是使用声明性路由器库，特别是对于更复杂的应用程序

下面是一个没有反应路由器来理解基本概念的示例：

const ViewOne=（{onClick}）=>(
视图1

onClick（“view2”）}>转到视图2
);
const ViewTwo=（{onClick}）=>(
视图2

onClick（“view1”）}>转到视图1
);
常量应用=（）=>{
const[currentView，setCurrentView]=React.useState（“view1”）；
返回(
{
当前视图==“视图1”？
setCurrentView（第页）}/>：
setCurrentView（第页）}/>
}
);
};
const domContainer=document.querySelector（“#我的应用程序”）；
render（，domContainer）
尝试
链接
react router dom的组件
，并将
作为路径传递给
，只要你想在onClick上重定向它

import { Link } from 'react-router-dom'

还有

<Link to={'/Components'}>
  <button > Click Me </button>
</Link>


点击我


const{Link，BrowserRouter}=window.ReactRouterDOM
函数App（）{
返回(
点击我
)
}
ReactDOM.render（，document.getElementById（“根”））

通常的解决方案是使用React路由器。只需遵循，您就可以开始了。因为您的一个标签是
react router
，我想您正在寻找一个涉及它的解决方案？你已经准备好了吗？嗨，皮尔五世和汤姆，谢谢你的回复。皮埃尔：我在林克试过这个例子。正在创建一个链接，一个d重定向即将到来。但是当我尝试创建一个按钮并重定向它时，我没有得到我的Sandeep，我已经尝试了链接中的方法。我得到了这个错误。未能编译。/src/App.js第39行：解析错误：意外标记，应为“>39 | hello（）{|^40 | alert（'you click on me'）；41 | return（42 |这一定是语法错误，只有在看到新代码时我才会提供帮助。这是代码快照的链接