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不会出现，那么你该如何解决呢？嗯，很简单，你有两种方法：

withRouterHOC

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

希望对大家有所帮助！

Answer 2

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 3

你有两种方法

使用react-router中的Redirect：

在您的handleClick 方法中设置一个状态并检查render 方法，如果是true 重定向，如下所示：

<Redirect to="/HomePage" /> 

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

window.location = '/HomePage';

Answer 4

我知道已经晚了，但我想分享一些东西，react-router-dom 已更新。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App/>} />
    <Route path="/new-page" element={<Home/>} />
  </Routes>
</BrowserRouter>

喜欢components 到element 和 history.push('/home') 到navigate('/home')

  const navigate = useNavigate()

  navigate('/new-page'{ state: pass-data } )

Answer 5

React Router v6 实现了useNavigate (docs)。

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