如何在reactJS中将页面重定向到另一页面？

Question

  

App.js

这是事件处理按钮，单击：

this.handleClick = this.handleClick.bind(this);


handleClick(e) {
    debugger;
    e.preventDefault();
    this.context.router.history.push('/HomePage');
  }


<button onClick={this.handleClick}>Navigate </button>

  

TypeError：无法读取未定义的属性“历史”

我使用npm install prop-types --save

进行了安装

它不起作用。

Answer 1

JSX

<Link to="/home">Homepage</Link>

如果要在jsx中使用它。 <Link>会向下编译为HTML中的<a>标记，因此应将其视为这样

以编程方式

this.props.history.push('/home');

历史记录未定义的原因是您可能将主路由页面设置错误

// app.js
import { BrowserRouter, Route, } from 'react-router-dom'
import UserList from './path/to/UserListComponent'

class App extends Component {
  ...

  render() {
    return (
      <BrowserRouter>
        ...
        <Route path="/users" component={UserList}/>
        ...
      </BrowserRouter>
    )
  }
}

做这样的事情

Answer 2

您有两种选择

使用Redirect中的react-router：

在您的handleClick方法中设置一个状态，然后检查render方法，是否使用true重定向，如下所示：

<Redirect to="/HomePage" /> 

另一种方法是使用window.location，如下所示：

window.location = '/HomePage';

Answer 3

要验证为什么不起作用，您可以console.log()道具，然后您会看到history不会出现，那么如何解决呢？好吧，很简单，您有两种方法：

withRouter HOC

  

使用withRouter可以通过withRouter高阶组件访问历史对象的属性和最接近的匹配项。 withRouter会在渲染后将更新的匹配，位置和历史道具传递给包装的组件。

props.history.push('/path')

示例：

import React from 'react';
import {withRouter} from 'react-router-dom';

function App({ history }) {
  return (
    <div>
      <button onClick={() => history.push('/signup')}>
        Signup
      </button>
    </div> 
  );
}

export default withRouter(App)

<Redirect />组件

  

渲染<Redirect>将导航到新位置。新位置将覆盖历史记录堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。

示例：

import React from 'react';
import {Redirect} from 'react-router-dom';

class Register extends React.Component {
  state = { toDashboard: false }

  handleSubmit = (user) => {
    saveUser(user).then(() => this.setState(() => ({ toDashboard: true })));
  }

  render() {
    if (this.state.toDashboard) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

我希望这对您有帮助！