CODEWITHSUNDEEP
reactjshyperlinkreact-routerrender
Leo Fabrikant
Leo Fabrikant

Reputation: 735

React Router Links are double rendering components

React Router links seem to be double rendering components. Can anyone duplicate my results below:

When the page first loads you will get "RENDERING HOME" logged once. But then using the links will always log the "RENDERING" line twice.

import ReactDOM from 'react-dom';
import React from 'react';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';


class home extends React.Component {
    render(){
        console.log('RENDERING HOME');
        return(
            <Link to='destination'>Link to Destination</Link>
        )
    }
}

class destination extends React.Component {
    render(){
        console.log('RENDERING DESTINATION');
        return(
            <Link to='/'>Link to Home</Link>
        )
    }
}

var App = React.createClass({
  render: function() {
      return(
          <Router history={hashHistory}>
              <Route path='/' component={home}/>
              <Route path='destination' component={destination}/>
          </Router>
      );
  },
});


ReactDOM.render(<App />, document.getElementById('app'));

EDIT: This appears to be a bug, others have noted it on the react-router github. Its only a bug with hashHistory. Switching to browserHistory resolves the issue.

Upvotes: 1

Views: 3148

Answers (2)

kdenz
kdenz

Reputation: 679

The problem is with hashHistory, please refer to this link: https://github.com/ReactTraining/react-router/issues/4266

To solve it for now, consider using browserHistory and you'll be fine.

Upvotes: 2

Khalid Azam
Khalid Azam

Reputation: 1643

you need to change router. add / in destination 

<Router history={hashHistory}>
              <Route path='/' component={home}/>
              <Route path='/destination**' component={destination}/>
  </Router>

add destination route inside root route

<Router history={hashHistory}>
       <Route path='/' component={home}>
          <Route path='destination**' component={destination}/>
        </Route> </Router>

Upvotes: 0

Related Questions