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

Question

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

当我点击 'click me' 按钮时，它应该重定向到 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 中有类似的东西吗？

Answer 1

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

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

请参考这个Link

Answer 2

基本上React没有"pages"。这个想法更多的是"show"或者"hide"的成分，这样给用户一个page/view的印象。

在 React 中实现路由的最简单方法是使用像 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>

Answer 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>

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

How to redirect to another page on button click in Reactjs

reactjs

react-router

reactjs.net