折腾:
【未解决】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
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
感觉是:
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