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;

当我单击“单击我”按钮时，它应该重定向到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 包定义路由，然后在按钮的onClick事件上使用下面提到的方法之一。

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

请参阅此Link

Answer 2

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

在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

尝试使用Link的{{1}}组件，并将react-router-dom传递为它的路径，以便在onClick上进行重定向。

to

例如。

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"))

如何在Reactjs中点击按钮重定向到另一页

3 个答案: