官网：
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 = () => (
- Home
- About
- Topics
)
const Home = () => (
Home
)
const About = () => (
About
)
const Topics = ({ match }) => (
Topics
-
Rendering with React
-
Components
-
Props v. State
{/* NESTED ROUTES */}
(
Please select a topic.
)}/>
)
const Topic = ({ match }) => (
{match.params.topicId}
)
export default Root
ReactDOM.render(例子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 (
- index
- ComponentList
)
}
}
// 程序入口
ReactDOM.render(主体内容中配置路由
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 (
)
}
const NoMatch = ({ location }) => (
No match for {location.pathname}
)
const PCNewsContainer = () => {
return (
);
}
export default PCNewsContainer;
React Router 4 不再主张集中式路由了。相反，路由规则位于布局和 UI 本身之间:
import { BrowserRouter, Route } from 'react-router-dom'
const PrimaryLayout = () => (
Our React Router 4 App
)
const HomePage =() => Home Page
const UsersPage = () => Users Page
const App = () => (
)
render(新的 API 概念：由于我们的应用程序是用于浏览器的，所以我们需要将它封装在来自 v4 的 BrowserRouter 中。还要注意的是我们现在从 react-router-dom 中导入它（这意味着我们安装的是 react-router-dom 而不是 react-router）。提示！现在叫做 react-router-dom 是因为还有一个 native 版本。
exact：
V4路由是包容性的，使用exact参数，可以确保最终只获取一个路由。
Switch：
在
"Index Routes" 和 "Not Found"
V4 中也没有
嵌套布局：
参考：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/