diff --git a/demos/components/app.riot b/demos/components/app.riot index ce084c5..9a41611 100644 --- a/demos/components/app.riot +++ b/demos/components/app.riot @@ -1,12 +1,16 @@ + + Every route :) + hello user diff --git a/src/components/route-hoc.js b/src/components/route-hoc.js index e157ab2..72365da 100644 --- a/src/components/route-hoc.js +++ b/src/components/route-hoc.js @@ -122,8 +122,14 @@ export const routeHoc = ({ slots, attributes }) => { this.callLifecycleProperty('onUnmounted', route) }, onRoute(route) { + const prevRoute = this.state.route this.state.route = route - this.mountSlot() + + // if this route component was already mounted we need to update it + if (prevRoute) this.slot.update({}, this.context) + // this route component was never mounted so we need to create its DOM + else this.mountSlot() + // emulate the default browser anchor links behaviour if (route.hash) $(route.hash)?.[0].scrollIntoView() }, diff --git a/test/components.spec.js b/test/components.spec.js index c3567f5..314d2e9 100644 --- a/test/components.spec.js +++ b/test/components.spec.js @@ -3,6 +3,7 @@ import HistoryRouterApp from './components/history-router-app.riot' import NestedUpdates from './components/nested-updates.riot' import RecursiveUpdatesBugRouter from './components/recursive-updates-bug-router.riot' import StaticBasePath from './components/static-base-path.riot' +import SameRouteMatches from './components/same-route-matches.riot' import { component } from 'riot' import { expect } from 'chai' import { router, defaults } from '../src/index.js' @@ -83,4 +84,25 @@ describe('components', function () { comp.unmount() }) + + it('Routes matched multiple times do not render twice (bug 173) ', async function () { + const el = document.createElement('div') + const comp = component(SameRouteMatches)(el) + + expect(comp.$$('p')).to.have.length(1) + + router.push('/foo') + + await sleep() + + expect(comp.$$('p')).to.have.length(1) + + router.push('/') + + await sleep() + + expect(comp.$$('p')).to.have.length(1) + + comp.unmount() + }) }) diff --git a/test/components/same-route-matches.riot b/test/components/same-route-matches.riot new file mode 100644 index 0000000..4b13dba --- /dev/null +++ b/test/components/same-route-matches.riot @@ -0,0 +1,21 @@ + + + +

{state.message}

+
+
+ + +