如何使用 react-router 和 ES6 类模拟 window.location

Question

我正在使用 react-router，所以我在整个应用程序中为我的链接使用<Link />组件，在某些情况下我需要根据用户输入动态生成链接，所以我需要类似window.location的东西，但没有页面刷新。

我发现了这个小笔记 - （ https://github.com/rackt/react-router/issues/835 ） - 我尝试使用this.context.router.transitionTo(mylink)但我遇到了上下文问题......

这导致我（ https://github.com/rackt/react-router/issues/1059 ），但是上下文返回并为空object，所以当我尝试执行类似的操作时： this.context.router.transitionTo(mylink); 我Cannot read property 'transitionTo' of undefined （如果我尝试在构造函数中设置 this.context = context）。

不要拖延，但我也厌倦了过多地混淆上下文，因为它是故意没有记录的，因为它仍在进行中，所以我已经阅读了。

有没有人遇到过类似的问题？

Answer 1

在使用 react router 浪费时间之后，我终于切换到基本的 javascript。

1. 为您的重定向创建一个组件：

   路由路径="*" 组件={NotFound}

2. 在组件中使用 window.location 重定向：

    componentDidMount() { if (typeof window !== 'undefined') { window.location.href = "http://foo.com/error.php"; } }

Answer 2

在这里找到了一个解决方案： https : //github.com/rackt/react-router/issues/975 ，在这里： https : //github.com/rackt/react-router/issues/1499

在构造函数中需要：

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

还需要添加一个静态属性：

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

然后我可以打电话：

this.context.router.transitionTo(/path-to-link);

Answer 3

如果你在 React-router 上使用 browserHistory，生活就简单多了。

import {browserHistory} from "react-router";

functionName() {
 browserHistory.push("/path-to-link");
}

Answer 4

看看 react-router 中的Navigation mixin。 http://rackt.github.io/react-router/#Navigation

从文档：

var Navigation = require('react-router').Navigation;

React.createClass({
  mixins: [Navigation],

  render: function() {
    return (
      <div onClick={() => this.transitionTo('foo')}>Go to foo</div>
      <div onClick={() => this.replaceWith('bar')}>Go to bar without creating a new history entry</div>
      <div onClick={() => this.goBack()}>Go back</div>
    );
  }
});

Answer 5

在这种情况下，我通常根据您使用的内容使用hashHistory或browserHistory并简单地调用hashHistory.push(<url>) 。 如果你正在使用ES6类你也可以去的withRouter提到特设提供由反应路由器这里。 这个高阶组件在你的组件中公开了一个名为router的 prop。 使用此道具，您可以使用this.props.router.push(<url>)进行重定向。

如果您必须从上下文中使用路由器，则必须提供@Ben 的回答中提到的上下文类型。

Answer 6

使用react-router-dom Link ，在我的代码片段中，我使用的是material-ui <Button>

import {Link} from "react-router-dom";
    
<Button color="primary" 
to="/join" component={Link}>
Join a Room
</Button>

Answer 7

使用useHistory获取历史对象并推送到它以更改 url

import { useHistory } from 'react-router-dom';

export default function ModificarUsuario({ url }) {
  const history = useHistory();
  
  function newRoute(){
    history.push('/my-route')
  }
}

Answer 8

最好的方法是使用 react-router-dom 中的 useHistory。 首先你必须导入它：

import { useHistory } from 'react-router-dom';

然后，您必须通过这样做来声明它的一个实例：

  let history = useHistory();

然后在箭头 function 或您的情况下执行以下操作：

history.push("Type here your route link not a domain not anythins else ... .")

Answer 9

嗯。 我最终不得不这样做（出于兼容性原因，我认为我正在运行旧版本的 react 16.14.0、react-router、react-router-dom 和 history 5.3.0 和其他依赖项）：

import (createBrowserHistory) from 'history';

const broswerHistory = createBrowserHistory();

const SomeFunction = props => {
   browserHistory.push('Thepath');
   browserHistory.go('SamePath');
}

推送本身只是将路径放入浏览器地址栏而不去那里。 go 本身只是重新加载了当前页面。

希望这可以帮助某人。