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

您可以在有权访问它的组件中的任何位置使用历史记录。在componentDidMount（）中，你可以这样做：

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

在componentDidUnmount（）中你取消它，因为你可能会在时间段结束之前去别的地方，然后它仍会在没有明显原因的情况下重定向你：

clearTimeout(this.handle);

我假设您的Confirm组件直接用作某些Route的'组件'道具。
如此

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

这就是你如何访问历史道具。如果没有，您将需要像这样包装确认：

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

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

使用React自动重定向？

2 个答案: