使用 ReactJS 单击按钮时如何定向到新页面？

Question

我在 React 中工作。我创建了一个按钮，单击该按钮应将用户引导至新页面。我制作了一个组件 About 并也将其导入。 我创建了一个函数 routeChange ，它将在单击按钮时定向到新页面。但是当单击按钮时，我没有被定向到任何页面。

相反，我得到一个错误。

文件夹可能没有任何错误。

我将关于组件导入为：

import React from 'react';
import {Navbar,NavbarBrand, Jumbotron, Button} from 'reactstrap';
import './App.css';
import Description from './Description';
import './description.css';
import {useHistory,withRouter} from "react-router-dom";
import About from './About';

function App() {
  const history=useHistory();
 routeChange = () =>{
   this.history.push('/About');
   }
return (
<withRouter>
<Navbar color="dark">
  <div className="container">
  <NavbarBrand className="navbar-brand abs" href="/">
      Cheat Sheet
  </NavbarBrand>
  </div>
</Navbar>
<Jumbotron>
  <p className="lead">Quick Review ,Revision And Mnemonic Are Always Good</p>
  <hr my-2/>
  <p className="lead">Page is still under Construction</p>
  <Button onClick={routeChange} className="About"color="primary">About Us</Button>
</Jumbotron>

    <div className="img-thumbnail">
       <Description/>
    </div>

  <div className="footer">
    &copy;Abhilekh Gautam all right reserved.
    <p>Follow<a rel="noopener noreferrer"href="https://www.quora.com/profile/Abhilekh-Gautam-1" target="_blank">Abhilekh Gautam</a> On quora</p>
  </div>
  
</withRouter>
)
}

导出默认应用；

Answer 1

这里有几个问题。

1. 将 function App (){} 更改为 const App = () => {} 稍后将有助于您的绑定，因为箭头函数的解释与声明性函数不同

2. 这个函数需要一些帮助

routeChange = () =>{
   this.history.push('/About');
   }

首先你必须将函数声明为一个常量，因为 App 是一个函数组件而不是一个类组件。

其次，因为 App 是一个功能组件，所以不需要 this 关键字，因为 routeChange 是一个箭头函数，并且绑定到 App

你的最终函数应该是这样的：

const routeChange = () => {
   history.push('/About');
   }

1. 使您的按钮 onClick 处理程序成为匿名函数，以便仅在单击时调用它而不是在渲染时调用

<Button onClick={routeChange}/>

此代码使路由更改函数在按钮呈现时被调用。而是将其更改为

<Button onClick={() => routeChange()}

4. 确保 /About 是到路由器中另一个组件的路由，否则您将收到 404 错误或遇到不匹配的组件（如果有的话）

---

你的最终产品应该是这样的

在 app.js 中

import React from 'react';
import {Navbar,NavbarBrand, Jumbotron, Button} from 'reactstrap';
import './App.css';
import Description from './Description';
import './description.css';
import {useHistory,withRouter, BrowserRouter, Route, Switch} from "react-router-dom";
import About from './About';

function App() {
return (
<>
<Navbar color="dark">
  <div className="container">
  <NavbarBrand className="navbar-brand abs" href="/">
      Cheat Sheet
  </NavbarBrand>
  </div>
</Navbar>
<BrowserRouter>
  <Switch>
    <Route exact path='/' component={Home}/>
    <Route exact path='/About' component={About}
  </Switch>
</BrowserRouter>
</>
)
}

那么您的 home 组件将如下所示：

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

const Home = () => {
  const history = useHistory();
  const routeChange = () => {
   history.push('/About');
   }
return (
<>
<Jumbotron>
  <p className="lead">Quick Review ,Revision And Mnemonic Are Always Good</p>
  <hr my-2/>
  <p className="lead">Page is still under Construction</p>
  <Button onClick={() => routeChange()} className="About"color="primary">About Us</Button>
</Jumbotron>

    <div className="img-thumbnail">
       <Description/>
    </div>

  <div className="footer">
    &copy;Abhilekh Gautam all right reserved.
    <p>Follow<a rel="noopener noreferrer"href="https://www.quora.com/profile/Abhilekh-Gautam-1" target="_blank">Abhilekh Gautam</a> On quora</p>
  </div> 
</>
)
}

export default Home