Navigating to a route with a query parameter and then to the same route without a query parameter will pass the old value of the query parameter in the component props

[rmacklin]

I’m noticing that if I route to a path with a query parameter, e.g. /profile?query_param=1 inside the render method, props.query_param is "1", as expected. However, if I subsequently route to /profile with no query param, props.query_param is still "1" when I’d expect it to be undefined. This seems like a bug.

Below is a small patch on top of https://github.com/developit/preact-boilerplate/tree/65fd23960c8efa323bc276b799394b578d1ce70d that demonstrates this issue:

Patch

Index: src/components/profile/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/profile/index.js	(revision 65fd23960c8efa323bc276b799394b578d1ce70d)
+++ src/components/profile/index.js	(revision )
@@ -9,17 +9,17 @@
 	// gets called when this route is navigated to
 	componentDidMount() {
 		// start a timer for the clock:
-		this.timer = setInterval(::this.updateTime, 1000);
-		this.updateTime();
+		//this.timer = setInterval(::this.updateTime, 1000);
+		//this.updateTime();
 
 		// every time we get remounted, increment a counter:
 		this.setState({ count: this.state.count+1 });
 	}
 
 	// gets called just before navigating away from the route
-	componentWillUnmount() {
-		clearInterval(this.timer);
-	}
+	//componentWillUnmount() {
+	//	clearInterval(this.timer);
+	//}
 
 	// update the current time
 	updateTime() {
@@ -28,7 +28,8 @@
 	}
 
 	// Note: `user` comes from the URL, courtesy of our router
-	render({ user }, { time, count }) {
+	render({ user, query_param }, { time, count }) {
+		console.log(query_param);
 		return (
 			<div class={style.profile}>
 				<h1>Profile: { user }</h1>
@@ -36,6 +37,8 @@
 
 				<div>Current time: { time }</div>
 				<div>Profile route mounted { count } times.</div>
+				<p><a href={`${window.location.pathname}?query_param=1`}>query_param=1</a></p>
+				<p><a href={window.location.pathname}>no query_param</a></p>
 			</div>
 		);
 	}

[rmacklin]

...And here's a standalone repro, thanks to @developit https://jsfiddle.net/developit/udLw60bw/

[rmacklin]

I've opened #169 to resolve this issue.