最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】React-RouterRedirect传递参数出错:Uncaught DOMException Failed to execute replaceState on History

ReactJS crifan 8109浏览 0评论

折腾:

【未解决】ReactJS页面是否支持传入url和其他登录信息等参数

期间,参考:

How do I pass props in react router v4? – Stack Overflow

https://stackoverflow.com/questions/42893669/how-do-i-pass-props-in-react-router-v4

的:

<Link to={{
  pathname: ‘/courses’,
  state: { fromDashboard: true }
}}> Courses </Link>

去写代码:

import React, { Component } from ‘react’;
import { ROUTE_PREFIX } from ‘common/define’;
import { withRouter, Redirect } from ‘react-router-dom’;
export default class Index extends Component {
  state = {
    curUserInfo : {
      isLogin: false,
      name: ”
    }
  };
  constructor(props) {
    super(props);
    console.log(`Index constructor`);
    console.log(this.props);
    this.loginCallback = this.loginCallback.bind(this);
  }
  loginCallback(returnedUserInfo){
    console.log(`Index loginCallback`);
    console.log(returnedUserInfo);
    this.setState({ curUserInfo : returnedUserInfo});
    console.log(this.state.curUserInfo);
  }
  render() {
    console.log(`Index render: this.state.curUserInfo.isLogin=${this.state.curUserInfo.isLogin}`);
    return (
      this.state.curUserInfo.isLogin ?
        <Redirect to={
          {
            pathname: ROUTE_PREFIX.MAIN,
            state: {
              curUserInfo: this.state.curUserInfo
            }
          }
        }/>
        :
        <Redirect to={
          {
            pathname: ROUTE_PREFIX.LOGIN,
            state: {
              curUserInfo: this.state.curUserInfo,
              loginCallback: this.loginCallback
            }
          }
        }/>
    );
  }
}
withRouter(Index);

结果报错:

Uncaught DOMException: Failed to execute ‘replaceState’ on ‘History’: function () { [native code] } could not be cloned.
    at eval (webpack:///./node_modules/history/createBrowserHistory.js?:211:23)
    at Object.confirmTransitionTo (webpack:///./node_modules/history/createTransitionManager.js?:44:7)
    at Object.replace (webpack:///./node_modules/history/createBrowserHistory.js?:202:23)
    at Redirect.perform (webpack:///./node_modules/react-router/es/Redirect.js?:50:15)
    at Redirect.componentDidMount (webpack:///./node_modules/react-router/es/Redirect.js?:37:32)
    at eval (webpack:///./node_modules/react-dom/lib/ReactCompositeComponent.js?:265:25)
    at measureLifeCyclePerf (webpack:///./node_modules/react-dom/lib/ReactCompositeComponent.js?:75:12)
    at eval (webpack:///./node_modules/react-dom/lib/ReactCompositeComponent.js?:264:11)
    at CallbackQueue.notifyAll (webpack:///./node_modules/react-dom/lib/CallbackQueue.js?:76:22)
    at ReactReconcileTransaction.close (webpack:///./node_modules/react-dom/lib/ReactReconcileTransaction.js?:80:26)

Uncaught DOMException Failed to execute replaceState on History

Failed to execute ‘replaceState’ on ‘History’ · Issue #3184 · ReactTraining/react-router

Uncaught SecurityError: Failed to execute ‘replaceState’ on ‘History’: · Issue #311 · reactjs/react-router-redux

javascript – Uncaught SecurityError: Failed to execute ‘replaceState’ on ‘History’: cannot be created in a document with origin ‘null’ – Stack Overflow

javascript – Failed to execute ‘replaceState’ on ‘History’ <local_URL> cannot be created in a document with origin ‘null’ – Stack Overflow

javascript – Browser: Uncaught SecurityError: Failed to execute ‘replaceState’ on ‘History’: A history state object with URL – Stack Overflow

Manipulating the browser history – Web APIs | MDN

Uncaught DOMException: Failed to execute ‘replaceState’ on ‘History’: function () { [native code] } could not be cloned.

react-router Uncaught DOMException: Failed to execute ‘replaceState’ on ‘History’: function () { [native code] } could not be cloned.

react-router  Failed to execute ‘replaceState’  could not be cloned.

ReactJS with react-router Browser History issue – Stack Overflow

Manipulating the browser history – Web APIs | MDN

Router: Failed to execute ‘pushState’ on ‘History’ error with PathLocationStrategy · Issue #6909 · angular/angular

When using base tag, react-router and redux-devtools, Uncaught SecurityError: Failed to execute ‘pushState’ on ‘History’ occurs · Issue #234 · ReactTraining/history

感觉是:

Redirect的to中的state,是属于History中的state,不能随便被修改的。

所以去找找其他正确的写法。

去找找react-router中Redirect to的参数中,如何传递参数,且是非字符串的对象

react-router Redirect to

react-router Redirect to pass object

react-router/Redirect.md at master · ReactTraining/react-router

to是对象,但是只能是固定的:

pathname,search,state

reactjs – Programmatically navigate using react router – Stack Overflow

javascript – How to do a redirect to another route with react-router? – Stack Overflow

进过调试发现规律了:

此处的:

如果Redirect的to中,给state传递了非普通的值变量,比如函数function,即此处的loginCallback:

  loginCallback(returnedUserInfo){
    console.log(`Index loginCallback`);
    console.log(returnedUserInfo);
    this.setState({ curUserInfo : returnedUserInfo});
    console.log(this.state.curUserInfo);
  }
      <Redirect to={
        {
          pathname: ROUTE_PREFIX.LOGIN,
          state: {
            curUserInfo: this.state.curUserInfo,
            loginCallback: this.loginCallback
          }
        }
      }/>

则就会报,无法clone拷贝的错误:

function () { [native code] } could not be cloned.

而如果传递的值,即使是Object(字典dict)但是其中的值是普通的值,则是可以通过location的state传递过去的:

index.js中:

export default class Index extends Component {
  state = {
    curUserInfo : {
      isLogin: false,
      name: ”
    }
  };
      <Redirect to={
        {
          pathname: ROUTE_PREFIX.LOGIN,
          state: {
            curUserInfo: this.state.curUserInfo
          }
        }
      }/>

login.js中:

export default class Login extends Component {
// class Login extends Component {
  state = {
    curUserInfo: {
      isLogin: false,
      name: ”  
    },
    // loginCallback: null
  };
  constructor(props) {
    super(props);
    console.log(`Login constructor`);
    console.log(this.props);
    console.log(this.props.location);
    console.log(this.props.location.state);
    this.state.curUserInfo = this.props.location.state;
    console.log(this.state.curUserInfo);
    // console.log(this.state.loginCallback);
    console.log(`props.match=${props.match},props.location)=${props.location},props.history=${props.history}`);
    this.submitLogin = this.submitLogin.bind(this);
  }

Login中的是可以通过:

this.props.location.state

获得对应的参数值的:

【总结】

然后再去测试,发现是可以传递:

字符串

布尔

Date日期

等普通的值的,但是Function函数,无法传递。

相关代码为:

index.js中:

export const EMPTY_USER_INFO = {
    isLogin: false,
    name: ”,
    roleName: ”,
    loginTime: null
};
  state = {
    curUserInfo : EMPTY_USER_INFO
  };
      <Redirect to={
        {
          pathname: ROUTE_PREFIX.LOGIN,
          state: {
            curUserInfo: this.state.curUserInfo
          }
        }
      }/>

然后login.js中:

this.props.location.state中就可以获得对应的curUserInfo了:

相关代码为:

export default class Login extends Component {
// class Login extends Component {
  state = {
    curUserInfo: EMPTY_USER_INFO
    // loginCallback: null
  };
  constructor(props) {
    super(props);
    console.log(`Login constructor`);
    console.log(this.props);
    console.log(this.props.location);
    console.log(this.props.location.state);
    this.state.curUserInfo = this.props.location.state.curUserInfo;
    console.log(this.state.curUserInfo);
    // console.log(this.state.loginCallback);
    console.log(`props.match=${props.match},props.location)=${props.location},props.history=${props.history}`);
    this.submitLogin = this.submitLogin.bind(this);
  }

转载请注明:在路上 » 【已解决】React-RouterRedirect传递参数出错:Uncaught DOMException Failed to execute replaceState on History

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.170 seconds, using 22.11MB memory