在 reactJS 中创建一个链接到另一个页面的按钮

Question

我目前正在做一个在 reactjs 中创建 web 应用程序的练习，任务是创建一个按钮，当按下时“应用程序转到新路线” - 所以基本上创建一个新页面。 我试过通常的 html 按钮 / href 但这不起作用。

我假设按钮会出现的代码如下所示：

`return (
    <div className="jokeSection">
      <h1>Chuck norris jokes</h1>
      <h3>{joke}</h3>
      <button onClick={() => newJoke()}>Click here for a chuckle</button>
      <button a href="search.js">Search for joke</button>
    </div>
  )`

感谢帮助！

Answer 1

你可以使用react-router的Link标签，它是一个非常流行的React第三方库

import { Link } from 'react-router-dom'; // IF IS REACT-WEB
import { Link } from 'react-router-native'; // IF IS REACT-NATIVE

// YOUR CODE

return (
<div className="jokeSection">
  <h1>Chuck norris jokes</h1>
  <h3>{joke}</h3>
  <button onClick={() => newJoke()}>Click here for a chuckle</button>
  <Link to="/search"><button>Search for joke</button></Link>
</div>
)

有关更多信息以及如何安装 React-Router，请点击此链接

Answer 2

您使用 'react-router-dom' 包路由到新组件，您可以在单独的文件中声明：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Search from './search'

  <Router>
    <div>
      <Route path="/search" component={Search} />
      <Link to="/search">Contact</Link>
    </div>
  </Router>

Route 组件会声明路由，Link 组件会显示它。文件 search.js 当然必须包含 Search 组件。

Answer 3

如果您使用 react-native 尝试使用react-router-native ，如果基于浏览器使用react-router-dom用于路由目的

要在按钮单击时进行导航，您可以使用此操作

<button onClick={() => {this.props.history.push("/path_of_the_page");}}>Click here for a chuckle</button>如果是类组件

或者您可以在功能组件中更改props.history.push("/path_of_the_page")而不使用this 。 但你必须确保 Route 在那里

在这里您可以获得从一个组件/页面到另一个组件/页面的路由示例