react-route 4

官网：

https://reacttraining.com/react-router/web/guides/philosophy

例子1：

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

const Root = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    {/* NESTED ROUTES */}
    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default Root
ReactDOM.render(<Root/>, document.getElementById('example'));

例子2

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

export default class Root extends React.Component{
    render() { 
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/">index</Link></li>
                        <li><Link to="/list">ComponentList</Link></li>
                    </ul>
                    <hr/>
                    <Route exact path="/" component={Index}/>
                    <Route path="/list" component={ComponentList}/>
                </div>
            </Router>
        )
    }
}

// 程序入口
ReactDOM.render(<Root/>, document.getElementById('example'));

主体内容中配置路由

import React from 'react';
import {
    Row, Col,
    Menu, Icon,
    Tabs, message,
    Form, Input,
    Button, Checkbox,
    Modal, Carousel
} from 'antd';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import 'whatwg-fetch';
import PCNewsBlock from './pc_news_block';
import PCImageBlock from './pc_news_image_block';
import PCNewsDetails from './pc_news_details';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const TabPane = Tabs.TabPane;

const setting = {
    autoplay: true,
    dots: true,
    speed: 500,
    infinite: true
}

const defalutContent = ({ match }) => {
    return (
        <Row>
            <Col span={2}></Col>
            <Col span={20} className="container">
                <div className="leftContainer">
                    <Carousel {...setting} className="carousel">
                        <div><img src="./src/images/carousel_1.jpg" /></div>
                        <div><img src="./src/images/carousel_2.jpg" /></div>
                        <div><img src="./src/images/carousel_3.jpg" /></div>
                        <div><img src="./src/images/carousel_4.jpg" /></div>
                    </Carousel>
                    <div className="imgBlock">
                        <PCImageBlock title={"国际"} type={'guoji'} count={8} widthImg={'112px'} imgParentWidth={"112px"} />
                    </div>
                </div>
                <Tabs className="tabs_news">
                    <TabPane tab="头条" key="1">
                        <PCNewsBlock type={"top"} count={10}></PCNewsBlock>
                    </TabPane>
                    <TabPane tab="娱乐" key="2">
                        <PCNewsBlock type={"yule"} count={10}></PCNewsBlock>
                    </TabPane>
                </Tabs>
            </Col>
            <Col span={2}></Col>
        </Row>
    )
}

const NoMatch = ({ location }) => (
    <div>
        <h3>No match for <code>{location.pathname}</code></h3>
    </div>
)

const PCNewsContainer = () => {
    return (
        <Router>
            <div>
                <Switch>
                    <Route path="/" exact component={defalutContent}></Route>
                    <Route path="/details/:uniquekey" component={PCNewsDetails}></Route>
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </Router>
    );
}

export default PCNewsContainer;

React Router 4 不再主张集中式路由了。相反，路由规则位于布局和 UI 本身之间:

import { BrowserRouter, Route } from 'react-router-dom'

const PrimaryLayout = () => (
  <div className="primary-layout">
    <header>
      Our React Router 4 App
    </header>
    <main>
      <Route path="/" exact component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </main>
  </div>
)

const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>

const App = () => (
  <BrowserRouter>
    <PrimaryLayout />
  </BrowserRouter>
)

render(<App />, document.getElementById('root'))

新的 API 概念：由于我们的应用程序是用于浏览器的，所以我们需要将它封装在来自 v4 的 BrowserRouter 中。还要注意的是我们现在从 react-router-dom 中导入它（这意味着我们安装的是 react-router-dom 而不是 react-router）。提示！现在叫做 react-router-dom 是因为还有一个 native 版本。

exact：

V4路由是包容性的，使用exact参数，可以确保最终只获取一个路由。

Switch：

在 <Switch> 中只有一个 <Route> 会被渲染。

"Index Routes" 和 "Not Found"

V4 中也没有 <IndexRoute>，但 <Route exact> 可以实现相同的功能，或者 <Switch> 和 <Redirect> 重定向到默认的有效路径，甚至一个找不到的页面

嵌套布局：

参考：https://zhuanlan.zhihu.com/p/28585911

获取路由的url，监听路由变化

使用componentWillReceiveProps钩子

  componentWillReceiveProps(nextProps) {
    // 从A页面路由到B页面
    // B页面的路径
    console.log("nextProps.location.pathname", nextProps.location.pathname)    // path/to/abc
    // A页面的路径
    console.log("this.props.location" ,this.props.location)    // path/to/abc
    // B页面的路由对象
    console.log("nextProps.history.location" ,nextProps.history.location)
    // B页面的路由对象
    console.log("this.props.history.location" ,this.props.history.location)
  }

杂记

1：路由都是会从第一层路由开始找的，所以需要在第一层路由 path=‘“/” 的主配置AuthorizedRoute；
2：如果前面的路由配置的是H5（浏览器路由），则后面配置的hash路由，是不需要继承前面的路由。

参考：
https://zhuanlan.zhihu.com/p/28585911
http://blog.csdn.net/sinat_17775997/article/details/77411324
https://reacttraining.com/react-router/web/api/Switch
http://618cj.com/react-router4-0%E8%B7%AF%E7%94%B1%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3api/