单击按钮 reactjs 路由到另一个页面

Question

我是 reactjs 的新手，现在从事路由和导航方面的工作。按下按钮时我试图导航到新页面，但它抛出错误。

我的App.js文件：

import React from 'react';
import './App.css';
import Editor from './editor';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import {createBrowserHistory} from "history";

const history = createBrowserHistory();

class App extends React.Component { 

  constructor(props) {
    super(props);
    this.state ={
    };

    this.onProductClick = this.onProductClick.bind(this);
  }

  onProductClick(){
    console.log('clicked');
    this.history.push('/editor');
  }

  render() {
    return (
       <Router>
          <div>
             <Route path='/editor' component={Editor} history={history} />
          </div>
          <div>
             <button onClick={this.onProductClick} className="btn btn-primary" id="a_1">Try now!</button>
          </div>
       </Router>

    )
  }
}

export default App;

我的 editor.js 文件是这样的：

import React, { Component } from 'react';

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    return (
      <div id="editor">
       <h3>Products Here</h3>
      </div>
    );
  }
}

export default Editor;

点击按钮后的错误信息是：

TypeError: Cannot read property 'push' of undefined

   15 | }
   16 | onProductClick(){
   17 |   console.log('clicked');
>  18 |   this.history.push('/editor');
   19 | ^
   20 | }
   21 | 
   22 | render() {

我不明白这里做错了什么。

Answer 1

历史对象在道具中可用。请改用 this.props.history.push。另外，您的代码有几处错误。尝试隔离路由和组件。该按钮必须在路由器组件之外。使用 React.Fragment 一次渲染两个以上的组件。研究更多关于 React 的知识。

Answer 2

看起来你在 onProductClick 中引用了 this.history.push('/editor');，因为你正在使用 this，JS 引擎试图在 [=] 的上下文中查找变量历史记录24=] 但由于在 class 的上下文中没有定义名为 history 的变量，因此它的计算结果为 undefined.push，导致错误 cannot read property push of undefined。

您确实在 class 定义之外定义了历史变量。要访问它，您可以通过此更改将 this.history.push('/editor'); 更改为 history.push('/editor');，您将引用您在顶部定义的历史变量。

但很可能使用 React 路由器，您应该尝试从 props 访问历史对象，所以 this.props.history.push('/editor')

单击按钮 reactjs 路由到另一个页面

Route to another page on click button reactjs

reactjs

react-router-v4