DOMException when navigating with react-router

[yanni4night]

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.

[developit]

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>.

[developit]

I've got a fix! Just making sure it's a fix for the root cause and not just a patch :)

[yanni4night]

Great, I've avoided that. Excellent library, more stability and compatibility expected!

[maxguzenski]

For me, put a "div" around Provider or/and Router doesn't work...

[developit]

I'll try to release the patch tonight.

[developit]

At the very least it prevents the exception, though it also appears to be a durable fix.

[developit]

Will be tomorrow morning, sorry. Gotta get some sleep. On the plus side, good perf improvements on the way.

[developit]

Fixed in 2743a80.

[developit]

Released in 6.1!