使用 React 自动重定向？

Question

鉴于以下组件代码，有没有办法在给定的毫秒数后自动重定向到另一个路由？

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
  Button,
  Col,
  Row } from 'reactstrap'

class Confirm extends Component {
  render() {
    return (
      <div>
        <Container>
          <Row>
            <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Confirm;

查看文档，react-router-dom 中似乎有一些功能，不是吗？

非常感谢。

编辑：在研究了根据答案操纵一些事情之后，我做了一些改变并想出了这个：

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter,
  BrowserRouter
} from "react-router-dom";
import {
  Container,
  Button,
  Col,
  Row } from 'reactstrap'
  import './Confirm.css';

class Confirm extends Component {
  componentDidMount() {
    setTimeout(() => {
    BrowserRouter.push("./home")
  }, 2000)
    }
    render() {
      return (
        <div>
          <Container>
            <Row>
              <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
            </Row>
          </Container>
        </div>
      );
    }
  }

export default Confirm;

但是由于某种原因推送不起作用。这是因为hashrouter 和browserrouter 之间的冲突吗？

我得到的是这样的：

Answer 1

class Confirm extends Component {
 componentDidMount() {
  setTimeout(() => {
  browserhistory.push("path/to/your/next/route")
}, 2000)
  }
  render() {
    return (
      <div>
        <Container>
          <Row>
            <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
          </Row>
        </Container>
      </div>
    );
  }
}

这应该可以完成这项工作，使用 componentDidMount 因为它只会在生命周期中发生一次，并且组件也会被挂载

Answer 2

您可以在组件内任何可以访问它的地方使用 history 属性。 在 componentDidMount() 你可以这样做：

this.handle = setTimeout(()=>{this.props.history.push(myUrl);}, milisecs);

并且在 componentDidUnmount() 中取消它，因为在时间段结束之前你可能会去其他地方，然后它仍然会无缘无故地重定向你：

clearTimeout(this.handle);

我假设您的 Confirm 组件直接用作某些 Route 的“组件”道具。
就这样

<Route path='/myUrl' component={Confirm} />

这就是您访问历史道具的方式。如果没有，您将需要像这样包装 Confirm：

import {withRouter} from 'react-router';
// define Confirm
export default withRouter(Confirm);

这将使您的包装组件能够访问特殊的路由道具。