如何在Reactjs中单击按钮时重定向到另一个页面答案

【问题标题】：How to redirect to another page on button click in Reactjs如何在Reactjs中单击按钮时重定向到另一个页面
【发布时间】：2020-01-26 16:44:44
【问题描述】：

我想使用 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;

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

import React from "react"

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

export default app

很久以前，我已经在 ASP.NET 中完成了这些王者的工作。我使用Response.redirect 来重定向页面，这非常简单。由于我是 React 新手，我对此一无所知。 React 中有类似的东西吗？

【问题讨论】：

通常的解决方案是使用 React Router。只需关注basic example，您就可以开始了。
因为您的标签之一是react-router 我假设您正在寻找涉及它的解决方案？你已经设置好了吗？
嗨 pierr V 和 Tom，感谢您的回复。 Pierre 我已经尝试了链接中的示例。创建链接和重定向即将到来。但是当我尝试创建一个按钮并重定向它时没有得到它

标签： reactjs react-router reactjs.net

【解决方案1】：

使用 react-router-dom 包定义 routing，然后在按钮的 onClick 事件上使用下面提到的方法之一。

this.props.history.push("componentpath")。
browserHistory 对象（在 react-router 包中）。

请参考Link

【讨论】：

嗨 Sandeep，我已经尝试了链接中的方法。我收到这个错误。无法编译 ./src/App.js 第 39 行：解析错误：意外令牌，应为“;” > 39 |你好（）{ | ^ 40 | alert('你点击了我'); 41 |返回 ( 42 |
一定是语法错误，只有看到新代码我才会帮忙。
这里是代码快照的链接drive.google.com/open?id=1i-4VjSYwbWX6zcGlpdOUttyI0XH2cPp-

【解决方案2】：

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

在 React 中实现路由的最简单方法是使用声明式路由库，例如 react router，尤其适用于更复杂的应用程序。

这里是一个没有react router的例子来理解基本概念：

const ViewOne = ({onClick}) => (
  <div>
    View 1 <br />
    <button onClick={() => onClick("view2")}>Go to view 2</button>
  </div>
);

const ViewTwo = ({onClick}) => (
  <div>
    View 2 <br />
    <button onClick={() => onClick("view1")}>Go to view 1</button>
  </div>
);



const App = () => {
  
  const [currentView, setCurrentView] = React.useState("view1");
  
  return (
      <div>
        {
          currentView === "view1" ? 
          <ViewOne onClick={page => setCurrentView(page)} /> : 
          <ViewTwo onClick={page => setCurrentView(page)} />
       }
      </div>
  );
};

const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);

<div id="my-app"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

【讨论】：

【解决方案3】：

尝试react-router-dom 的Link 组件并将to 作为路径传递给它，无论您想在onClick 上重定向到什么位置。

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

例如。

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

const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
  return (
  <BrowserRouter>
      <button><Link to='/abc' target='_blank'> Click Me  </Link></button>
   
    </BrowserRouter>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<body><div id="root"></div></body>

【讨论】：