<b>React-Router其实很简单，就是控制页面之间的跳转。</b>
现举例说明：
-
创建几个组件
./app/containers/App.jsx 所有页面的外壳
./app/containers/Home 主页
./app/containers/User 用户页
./app/containers/NotFound 404
App组件所有路由外面套的外壳class App extends React.Component { render() { return ( <div>{this.props.children}</div> ) } } -
配置 router
class RouteMap extends React.Component {
updateHandle() {
console.log('每次router变化之后都会触发')
}
render() {
return (
<Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}>
<Route path='/' component={App}>
<IndexRoute component={Home}/>
<Route path='user' component={user}/>
<Route path="*" component={NotFound}/>
</Route>
</Router> )
}
}
使用时直接在页面引入RouteMap就好了
import React from 'react' import { render } from 'react-dom'
import { hashHistory } from 'react-router'import RouteMap from './router/routeMap' render( <RouteMap history={hashHistory}/>, document.getElementById('root') ) -
跳转页面
<b>第一种是 <Link> 跳转(这个<Link>渲染完了就是html中a标签)</b>
import React from 'react'
import { Link } from 'react-router'class Home extends React.Component { render() { return ( <div> <p>Home</p> <Link to="/user">to list</Link> </div> ) } } export default Home
<b>第二种是使用 js 跳转</b>
import { hashHistory } from 'react-router'
hashHistory.push('/home/')
- 获取参数
可以获取 url 中的参数，比方说id参数
this.props.params.id 获取 - 性能问题
<b>视屏时间</b>
- 解决方案就是先不要加载其他页面的代码，即首页需要哪些代码我就先加载、执行哪些，不需要的就先别加载。
- 针对大型项目的静态资源懒加载问题，react-router 也给出了解决方案 —— huge-apps，它将 react-router 本身和 webpack 的 require.ensure结合起来，就解决了这一问题。我本人项目没那么复杂，暂时没用到。
