用react 17 的ReactDOM.render(), 缓存成功， 但不支持react 18的版本 ReactDOM.createRoot() 缓存失败，请问有兼容方案？

[wumian27]

切换路由从新回到已经切换的路由， 会报错
但用 ReactDOM.render()不会报错

[CJY0208]

报错的内容是啥？

[wumian27]

react-dom.development.js:22680 Uncaught Error: [mobx-state-tree] Value undefined is no MST Node
at Vt (sdk.js:893:30276)
at mt (sdk.js:893:28892)
at E (sdk.js:893:3301)
at r.componentWillUnmount (sdk.js:1921:3294)
at r.h (sdk.js:1551:1236)
at r. (sdk.js:1551:1445)
at callComponentWillUnmountWithTimer (react-dom.development.js:22698:16)
at safelyCallComponentWillUnmount (react-dom.development.js:22715:7)
at commitUnmount (react-dom.development.js:23566:13)
at commitNestedUnmounts (react-dom.development.js:23613:7)

[CJY0208]

看起来好像不是和 cache-route 直接相关的报错，有可能是 mobx 的错误吗？

[wumian27]

但是用react17的 ReactDOM.render 可以正常使用 ，下面错误还有
react-dom.development.js:18535 The above error occurred in the <WithStore(t)> component:

at r (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:1921:426)
at o (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:1923:2907)
at t (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:2039:778)
at t (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:2039:2712)
at t (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:2029:497)
at t (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:2025:324)
at a (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:1951:1004)
at a (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:1713:1498)
at t (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:2041:454)
at o (https://ux-assest.jlpay.com/emp/amis-dev/sdk.js:1923:2907)
at div
at SchemaRender (http://10.150.129.21:8092/static/js/src_bootstrap_tsx.077d1146.js:128:66)
at C (https://ux-assest.jlpay.com/emp/react-router-dom/react-router-dom.js:3545:39)
at Updatable (http://10.150.129.21:8092/static/js/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-9d5752.1e9fd295.js:17746:5)
at Suspender (http://10.150.129.21:8092/static/js/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-9d5752.1e9fd295.js:17622:5)
at Suspense
at Freeze (http://10.150.129.21:8092/static/js/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-9d5752.1e9fd295.js:17663:22)
at DelayFreeze (http://10.150.129.21:8092/static/js/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-9d5752.1e9fd295.js:17691:5)
at Updatable$1 (http://10.150.129.21:8092/static/js/vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-9d5752.1e9fd295.js:17771:22)
at div

[wumian27]

如果不用[react-router-cache-route 页面不会报错，正常使用

[ruoru]

close DelayFreeze and export default Updatable will well.

react-router-cache-route/src/core/Updatable/index.js

Lines 10 to 44 in 5fd71d9

	class DelayFreeze extends Component {
	static propsTypes = {
	freeze: PropTypes.bool.isRequired
	}
	state = {
	freeze: false,
	}
	constructor(props) {
	super(props)
	this.state = {
	freeze: props.freeze,
	}
	}
	freezeTimeout = null
	shouldComponentUpdate = ({ freeze }) => {
	const currentFreeze = this.props.freeze
	if (freeze !== currentFreeze) {
	clearTimeout(this.freezeTimeout)
	this.freezeTimeout = setTimeout(() => {
	this.setState({
	freeze,
	})
	}, 1000)
	}
	return true
	}
	render = () => (
	<Freeze freeze={!this.props.freeze ? false : this.state.freeze}>
	{run(this.props, 'children')}
	</Freeze>
	)
	}

export default (props) => (
    <Updatable {...props} />
)

and why add freezeTimeout?