React-Router route component is constructed twice on page refresh - reactjs

Question

I have a component that boots up a timer with setInterval in the componentDidMount in my component associated with /testRoute.
That looks like:
componentDidMount() {
if (this.timer == null) {
var timerFunction = function() { this.tick() }.bind(this)
this.timer = setInterval(timerFunction, 500);
}
}
I have a balancing line of code to remove the timer when the component 'goes away' (not sure to what extent this lifecycle hook is equivalent to the object dying, e.g. getting deallocated),
componentWillUnmount() {
clearInterval(this.timer)
}
The problem is that if I'm on route /testRoute and I refresh the browser, constructor() is called twice, and so is componentDidMount. At this point, there are two "timers" ticking. If I navigate to another route, componentWillUnmount is called and one of the timers is cleared. But that still leaves the one.
Is it expected behavior that my component should hit componentDidMount twice on page refresh? And if so, how can I ensure that only one timer is ever setup?
edit:
-demonstrating this with a skeleton example:
function Nav() {
return (
<ul className='nav'>
<li><Link to='/test'>test</Link></li>
</ul>
)
}
With a single route:
class App extends React.Component {
render() {
return (
<Router>
<div>
<Nav />
<Route path='/test' component={Test} />
</div>
</Router>
)
}
}
And a trivial component:
class Test extends React.Component {
constructor() {
super()
console.log("constructor")
}
render() {
return <div>test</div>
}
}
In this code: "constructor" is logged to the console twice on refreshing /test.

Answer 1

I have similar issue which my component mounted twice. In my case, I make a request in componentDidMount which called twice. I render some of Route by taking from server by async call (App.ROUTES), and some as static (routeInfo.insideDashboard). And the static components mount twice.
<Dashboard specialMenu={this.state.menu}>
<Switch>
{routeInfo.insideDashboard.map(route =>
<Route exact key={route.path} path={route.path} component={Auth(route.component)}/>)}
{App.ROUTES.map(route => <Route key={route.urlPath} exact path={"/" + route.urlPath}
component={Auth(asyncComponent(route.importPath, {title: route.title}))}/>)}
<Route component={NotFound}/>
</Switch>
</Dashboard>
I suspect that the reason can be render of static routes (routeInfo.insideDashboard) twice, before other routes come from server and after it. I add a check routesFromServerTaken before render Routes which ensures Route (definitions) render only once.
<Dashboard specialMenu={this.state.menu}>
<Switch>
{routesFromServerTaken ? routeInfo.insideDashboard.map(route =>
<Route exact key={route.path} path={route.path} component={Auth(route.component)}/>): null}
{App.ROUTES.map(route => <Route key={route.urlPath} exact path={"/" + route.urlPath}
component={Auth(asyncComponent(route.importPath, {title: route.title}))}/>)}
<Route component={NotFound}/>
</Switch>
</Dashboard>
This solved my problem, components mount only once now.