Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Params not yet available in 'pushState' and 'render' event handlers

See original GitHub issue

Expected behavior

When handling a ‘pushState’ event, the resolved state.params should already be available upon calling the event handler.

Actual behavior

Resolved params are only added to state during render.

Steps to reproduce behavior

To reproduce, click on the link to ‘some page’ in this example app:

var choo = require('choo')
var html = require('choo/html')

var app = choo()

app.route('/', function () {
  return html`
    <body>
      <a href="/somepage">some page</a>
    </body>
  `
})

app.route('/*', function (state) {
  return html`
    <body>
      page: ${state.params.wildcard} <!-- correctly renders 'somepage' -->
    </body>
  `
})

app.use(function (state, bus) {
  bus.on('pushState', function () {
    console.log(state.params.wildcard) // logs undefined
  })

  bus.on('render', function () {
    console.log(state.params.wildcard) // logs undefined
  })
})

app.mount('body')

This is a problem for my specific use case, because in the ‘pushState’ (or ‘render’) event handler, I want to fetch some data based on the page param, and fill out the page based on the response.

As an aside, I do want to mention that working with choo v5 has been a real joy so far. You absolutely nailed it with the new stripped-down API for app.use!

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

espycommented, Jan 3, 2018

I’m afraid this is still a problem in the current choo (6.6.0), I’ve taken the app generated by npx create-choo-app and added the following:

to store.js

  emitter.on('navigate', () => {
    console.log('navigated, state.params is', state.params)
  })

index.js gets one more route:

app.route('/day/:date', require('./views/main'))

and main.js’s html output gets some links so we can get there.

<a href='/day/2017-12-29'>2017-12-29</a>
<a href='/day/2017-12-30'>2017-12-30</a>

The resulting behaviour is: first click: params is empty second click: params.date is from the route we just left

So maybe this isn’t closed after all 😿

As for workarounds, you wrote:

In the short term you can move your .use() calls to after .start() which should have the same effect.

But there no longer seems to be a .start() anywhere, and moving the .use() to the end of index.js makes no difference. My workaround is currently a setTimeout 🙈

0reactions

yoshuawuytscommented, Jan 17, 2018

Should be fixed in choo@6.7.0 🎉