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的一个bug。切换到browserHistory可以解决问题。

Answer 1

问题在于hashHistory，请参考以下链接： https://github.com/ReactTraining/react-router/issues/4266

要解决此问题，请考虑使用browserHistory，你会没事的。

Answer 2

你需要改变路由器。添加/到达目的地

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

在根路径中添加目标路由

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

React Router Links是双重渲染组件

2 个答案: