DOMException when navigating with react-router
yanni4night opened this issue · comments
I don't know what's wrong with it, so the replication may be a little complicated, please be patient.
I am trying to use redux
,react-redux
,react-router
, react-router-redux
as well as preact
instead of react
to build an APP. As I read the doc, preact-compat
makes preact as same as react mostly.
I found in some cases, dom-diff algorithm may crash. Please navigate to https://bitbucket.org/yanni4night/preact-issue-297 and follow README to replicate the issue. In brief, when I pressed the "go back" button of browser:
I guess the definition of routers may be the key:
render((
<Provider store={store}>
<Router history={history}>
<Route path="/" component={ContainerPage}>
<IndexRoute component={LatestPage}/>
<Route path="latest" component={LatestPage}/>
<Route path="hot" component={HotPage}/>
</Route>
<Route path="/topic/:topic_id" component={TopicPage}></Route>
</Router>
</Provider>
), document.querySelector('#preact-root'));
If I move the last router, everything is OK:
render((
<Provider store={store}>
<Router history={history}>
<Route path="/" component={ContainerPage}>
<IndexRoute component={LatestPage}/>
<Route path="latest" component={LatestPage}/>
<Route path="hot" component={HotPage}/>
<Route path="/topic/:topic_id" component={TopicPage}></Route>
</Route>
</Router>
</Provider>
), document.querySelector('#preact-root'));
So, how could I avoid this issue?
BTW, react works fine.
Hi @yanni4night! Thanks for the detailed explanation of the issue. This crasher was introduced in 6.0
as a result of attempting to reuse server-rendered DOMs. Fixing it is currently my top priority! I have a repro I'm using locally that I'll be turning into a test case.
In the meantime (hopefully not long), you might find that wrapping your <Provider>
in a <div>
(or any element) avoids the issue. Alternatively, place any element between the <Provider>
and <Router>
.
I've got a fix! Just making sure it's a fix for the root cause and not just a patch :)
Great, I've avoided that. Excellent library, more stability and compatibility expected!
For me, put a "div" around Provider or/and Router doesn't work...
I'll try to release the patch tonight.
At the very least it prevents the exception, though it also appears to be a durable fix.
Will be tomorrow morning, sorry. Gotta get some sleep. On the plus side, good perf improvements on the way.
Fixed in 2743a80.
Released in 6.1
!