如何在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

要验证为什么不起作用，您可以使用console.log()您的道具，您将看到它history不会出现，那么您如何解决这个问题？嗯，这很简单，你有两种方法：

withRouter 高铁

使用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 /> 成分

渲染 a<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>
    )
  }
}

我希望这对你们有帮助！

Answer 2

你有两条路

使用Redirect来自react-router：

在您的handleClick方法中设置一个状态并检查渲染方法以及是否是true重定向，如下所示：

<Redirect to="/HomePage" /> 

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

window.location = '/HomePage';

Answer 3

React Router v6 实现useNavigate（文档）。

import { useNavigate } from 'react-router-dom';
let navigate = useNavigate();
navigate('/myOtherPath');

Answer 4

JSX

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

如果要在jsx中使用它。<Link>向下编译以<a>在HTML中进行标记，因此只需将其视为

以编程方式

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

做这样的事情