React-router: Using match() on client causes onEnter() to be called twice on initial page load.

[tybro0103]

This only happens on the initial page load if you go directly a route (/planets in this case) with an onEnter(). Subsequent visit to that route via pushState will only trigger it once.

I believe this is happening because match() and then render(<Router> ...) are both triggering the hook. Perhaps there's a way to avoid this?

This can be reproduced with minimal setup:

client/index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, match } from 'react-router';

import routes from '../app/routes';

let {pathname, search, hash} = window.location;
let location = `${pathname}${search}${hash}`;
let appMainEl = document.getElementById('app-main');

match({routes, location}, (error, redirect, renderProps) => {
  var component = <Router {...renderProps} history={browserHistory} />;
  render(component, appMainEl);
});

app/routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/app';
import Home from './components/home';
import Planets from './components/planets/';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/planets" component={Planets} onEnter={onPlanetsEnter} />
  </Route>
);

function onPlanetsEnter() {
  // happens twice!
  console.log('PLANETS ENTER!');
}

[taion]

It's been fixed on master.

[tybro0103]

@taion oh good. Do you know which commit? And perhaps when it would make it into an RC?

[taion]

https://github.com/rackt/react-router/pull/2965

Need a new history RC first to resolve some other bugs.

[stephenjwatkins]

@taion did this ever make it into a published react-router version?

I'm on [email protected] and I'm still getting onEnter hooks being called twice on initial page load when using match().

[taion]

This made it in. Check the docs – the API is a bit different.

[JackyXiong]

@stephenjwatkins
I found when I use <a>, the onEnter will be called twice, but use Link from react-router will not. Why this happens? I'm really confused.

[jonashartwig]

Hi, I use react-router and history ^3.0.0 and i get this behavior as well but only on the main route.

        <Router history={history}>
                    <Redirect from="/" to={currentLocale()} />
                    <Route path="/:locale" onEnter={() => console.log("called twice")} component={HomeView} />
        </Router>

regards