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

Docs: Code to listen for 'navigation' change does not output written behavior

See original GitHub issue

Expected behavior

In the Choo docs on Routing, in the section “Listening for Route Changes” implementing:

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

var app = choo()
app.use((state, emitter) => {            // 1.
  emitter.on('navigate', (route) => {    // 2.
    console.log(`Navigated to ${route}`) // 3.
  })
})

Should return a console message "Navigated to [insert route here]

Actual behavior

This code snippet instead returns a console message “Navigated to undefined”

Steps to reproduce behavior

  1. Add in code as written in the docs (and reproduced above)
  2. Click through / navigate between two separate routes.
  3. Observe the console message.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
karenielcommented, Feb 25, 2018

re: knowing the previous route:

How about adding a previousRoute property to the state? We could copy it over when we _matchRoute:

 Choo.prototype._matchRoute = function (locationOverride) {
   var location, queryString
   if (locationOverride) {
     location = locationOverride.replace(/\?.+$/, '')
     queryString = locationOverride
   } else {
     location = this._createLocation()
     queryString = window.location.search
   }
   var matched = this.router.match(location)
   this.state.href = location
   this.state.query = nanoquery(queryString)
+  this.state.previousRoute = this.state.route
   this.state.route = matched.route
   this.state.params = matched.params
   this.state._handler = matched.cb
   return this.state

I’m looking at animating route transitions and having access to previous route (somehow, doesn’t have to be this way) would be super useful.

As for the docs reflecting actual behavior I made a small pr here: https://github.com/choojs/website/pull/61

0reactions
marcbachmanncommented, Feb 15, 2018

We won’t have access to the previous state anymore with the current setup. Should we only pass specific properties?

… I’m also not sure how we should differentiate the state in before and after hooks. This needs a proper proposal for all events/behaviors first. Here’s also some comment regarding that: https://github.com/choojs/choo/pull/613#discussion_r158749713

Read more comments on GitHub >

github_iconTop Results From Across the Web

Docs: Code to listen for 'navigation' change does not output written ...
Docs : Code to listen for 'navigation' change does not output written behavior. ... In the Choo docs on Routing, in the section...
Read more >
how to listen for route change in react-router-dom v6
This solution is fine if the order of events doesn't matter, but useEffect()'s behaviour is to run child effects before parent effects (github....
Read more >
SwiftUI Navigation Stack pops back… | Apple Developer Forums
If the model userLoader is updated in any way, the stack pops back automatically to the first view. This is not the desired...
Read more >
Interact programmatically with the Navigation component
If you only want to check the result when the dialog destination is closed and the underlying destination becomes the current destination, you ......
Read more >
Modern client-side routing: the Navigation API
First is programmatic navigation, where navigation is caused by a method call inside your client-side code. You can call navigation.navigate('/another_page') ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found