官网：
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/
