index.js代码如下
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, IndexLink, hashHistory, IndexRoute } from 'react-router'
import PropTypes from 'prop-types'
const App = ({ children }) => (
<div>
<h1>App</h1>
<ul>
<li><IndexLink to="/">Dashboard</IndexLink></li>
<li><Link to="/about">About</Link></li>
</ul>
{children}
</div>
)
App.proptypes = {
children : PropTypes.node
}
const About = () => {
console.log('about')
return (
<h3>About</h3>
)
}
const Dashboard = () => (
<div>Welcome to the app!</div>
)
const routerElement = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Dashboard}/>
<Route path="about" component={About}/>
</Route>
</Router>
)
render(routerElement, document.getElementById('app'))
在渲染<About />
的时候会打印‘about’。
操作流程:
进入
/
,首页。点击
about
链接路由跳转到About。控制台查看日志,发现打印了2次‘about’。
想问的是一次跳转为何会渲染2次<About />?
另外,把hashHistory
换成browserHistory
,就正常打印一次了。这2者具体机制有何区别?
应该是hashHistory本身的bug,https://github.com/ReactTrain...