React路由器v6

我已经有一段时间没有接触过React了，但我想感谢并强调Shimrit Snapir的以下评论：

在React Router 6.0上，<Redirect/>更改为<Navigator/>

React路由器V4

tl:dr；

if (navigate) {
  return <Redirect to="/" push={true} />
}

简单而声明性的答案是，需要将<Redirectto={URL}push={boolean}/>与setState（）结合使用

push：boolean-如果为true，重定向将向历史中推送一个新条目，而不是替换当前条目。

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // Here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

这里有一个完整的例子。在这里阅读更多信息。

PS.该示例使用ES7+属性初始化器初始化状态。如果你感兴趣的话，也可以看看这里。

在react router的上下文中，已经有大量的答案可以正确、准确地回答这个问题，但我想花点时间指出一些我在其他答案中没有提到的问题。

这是一种stackoverflow的比喻，建议用与原始问题不同的方式来做一些事情，但在这种情况下，由于问题的年龄，我觉得在当前的时间里，问题的表述会有所不同。

我建议放弃react router，只需通过window.location.href=[yoururlhere]推送到本地浏览器位置，然后通过正则表达式（或确切的）匹配window.location.pathname和您的预期路径来检查路径。

更简单的答案通常是最好的答案，在这种情况下，React Router的用例由本地位置对象API提供更好的服务。

以下是最简单、最干净的方法，大约是当前的React Router 3.0.0和ES6：

使用ES6反应路由器3.x.x：

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

或者，如果不是默认类，则导出如下：

withRouter(Example);
export { Example };

注意，在3.x.x中，<Link>组件本身使用router.push，因此您可以传递任何传递<Linkto=标记的内容，例如：

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'

以下是如何使用带有ES6的react router v2.0.0来实现这一点。react路由器已远离mixin。

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

只需使用useNavigate from react router dom

import { useNavigate } from "react-router-dom";

const MYComponent = () => {
    const navigate = useNavigate();

    navigate("Xyz/MYRoutes");

 
}

export default MYComponent;

在代码中使用上述的useNavigate功能。

警告：此答案仅涵盖1.0之前的ReactRouter版本之后，我将用1.0.0-rc1用例更新这个答案！

你也可以在没有混合的情况下这样做。

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

有上下文的问题是，除非在类上定义contextType，否则它是不可访问的。

至于什么是上下文，它是一个对象，就像props一样，从父对象传递给子对象，但它是隐式传递的，不需要每次都重新声明props。看见https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html