React-router 4.0 初探

[laihuamin]

基本的router的书写格式

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

<Router>
    <div>
        <ul className="app-tab">
            <li className="tab-item"><Link to="/">推荐</Link></li>
            <li className="tab-item"><Link to="/singer">歌手</Link></li>
            <li className="tab-item"><Link to="search">搜索</Link></li>
            <li className="tab-item"><Link to="rank">排行</Link></li>
        </ul>
            <Route exact path="/" component={Recommend} />
            <Route path="/singer" component={Singer} />
            <Route path="/search" component={Search} />
            <Route path="/rank" component={Rank} />
    </div>
</Router>

与router相关的包

• react-router react-router的核心
• react-router-dom 把router渲染成dom的包
• react-router-native 用于react native 的react-router
• react-router-redux 用于集成redux的包
• react-router-config 用于配置静态的router

  router详细的书写格式

  实例演示地址 源代码地址

• index.js——入口文件

  
  import React from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import App from './components/app.js';

render((

),document.getElementById('root'));

>  \<BrowserRouter>浏览器路由，使用HTML5 History API (pushState, replaceState,popState事件)来同步UI和URL

> \<HashRouter> (锚点路由)，使用URL的哈希部分，即(window.location.hash).哈希历史记录不支持 location.key 或 location.state。 在以前的版本中，我们试图缓和行为，但是有一些边缘案例我们无法解决。 任何需要此行为的代码或插件将无法正常工作。 由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用 \<BrowserHistory>。

[whatwg6]

better scroll在 react问题大不大