React Router Links 是双渲染组件

Question

React Router 链接似乎是双渲染组件。谁能在下面复制我的结果：

首次加载页面时，您将 "RENDERING HOME" 登录一次。但是随后使用链接将始终记录 "RENDERING" 行两次。

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'));

编辑：这似乎是一个错误，其他人已经在 react-router github 上注意到了它。它只是 hashHistory 的一个错误。切换到 browserHistory 解决了这个问题。

Answer 1

您需要更换路由器。在目的地添加 /

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

在根路由中添加目标路由

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

Answer 2

问题出在hashHistory，请参考这个link： https://github.com/ReactTraining/react-router/issues/4266

暂时解决这个问题，考虑使用browserHistory就可以了。

React Router Links 是双渲染组件

React Router Links are double rendering components

render

hyperlink

reactjs

react-router