React的路由其实就是一个React组件，路由要通过Route组件定义。例子：
import * as React from "react";
import {IndexRedirect ,Route} from 'react-router';
import Home from '../components/home';
import ImgUpload from '../components/uploadImg';
import Login from '../components/Login';
import App from '../contains/App';
export default (
)
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Router ,browserHistory} from 'react-router';
import routes from '../router';
ReactDom.render(
上面代码中，用户访问根路由/home时，组件会先加载App组件，然后在加载Home组件。而App组件要写成以下：
import * as React from 'react'
import * as ReactDom from 'react-dom'
interface IAppProps {}
interface IAppState {}
export default class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
{this.props.children}
)
}
}
上面代码中，App组件的this.props.children属性就是子组件。
这样看react的路由就是一个组件，最外层的route对应的是组建App，当访问/时，加载App组件，而加载里面的嵌套的路由时，会在App内部的this.props.children加载相应的组件。
IndexRoute
IndexRoute是指定当访问跟路由的时候this.props.children默认加载的组件。
IndexRedirect
IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。
histroy 属性
Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
history属性，一共可以设置三种值
1.hashHistory：路由将通过URL的hash部分（#）切换。
2.browserHistory：浏览器的路由就不再通过Hash完成了，而显示正常的路径。
3.createMemoryHistory：主要用于服务器渲染。
路由的钩子
每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发
例如
replace(`/messages/${params.id}`)
}
/>
React Router4
以上我们讲解了Router4以前的版本，在v3中的一些思想到了v4，已经不正确了，
1.所有的路由全部订应在一起。
2.布局是通过
3.布局和页面组件是完全纯粹的，它们是路由的一部分。
如果以上代码用v4实现：
import * as React from 'react'
import { BrowserRouter, Route, Link} from 'react-router-dom'
import Home from '../components/home';
import ImgUpload from '../components/uploadImg';
import Login from '../components/Login';
export const App = () => (
)
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {App} from '../contains/App';
ReactDom.render(
路由直接被定义到App组建里，即之前的this.props.children
产生了新的api：
BrowserRouter：代表浏览器router，而且我们现在从 react-router-dom 中导入它。
HashRouter：路由将通过URL的hash部分（#）切换。
MemoryRouter： 主要用于服务器渲染。
包容性路由
V3 的路由规则是“排他性”的，这意味着只有一条路由将获胜，在this.props.children里面最终只加载一个组件。
但是，V4的路由规则是包容的，假如没有exact ，那么则会加载所有组件。例如上例中，当访问 / 时，默认加载App组件，但是App组件下还有Home、Login、ImgUpload，这些将都被渲染。
排他性路由
如果你只需要在路由列表里匹配一个路由，则使用
export const App = () => (
)
在此处，我们依然需要加上exact，因为无论你访问 /ImgUpload
/login 主页的路径也将被匹配，所以会先显示 Home，但是Switch只允许一条路由生效，所以无论你点login、还是ImgUpload，它永远显示的事Home。所以在配置顺序上要做一些调整，例如将 / 放到最后。
如果要是，加上 exact 则不需要考虑顺序问题了。
“默认路由”和“未找到”
V4中代替IndexRoute的 是
如果没有路由解析，则可以使用
嵌套布局
在V3使用嵌套布局：
export default (
)
app.js
export default class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
{this.props.children}
)
}
}
person.js
export default class Person extends React.Component{
constructor(props){
super(props)
}
render(){
return (
- 首页
- 上传
- 登陆
- 个人
- center
- like
{this.props.children}
)
}
}
如果使用V4，我们只需要在嵌套的组件里面设计：
App.js
export const App = () => (
)
person.tsx
interface states {
id : Number,
[propName:string] : any
}
export default class Person extends React.Component{
constructor(props){
super(props)
this.state = {
id : 12
}
}
render(){
return (
- 首页
- 上传
- 登陆
- person
- center
- like
- user
this is person
)
}
}
main.tsx
ReactDom.render(
在组建的props中，存在一个match对象，我们打印一下：
我们可以拿到 当前组建的路由，因此在person.js可以这样
match 对象给我们提供了几个属性，包括 match.params、match.path、match.url
match.path vs match.url
在上述代码中，我们打印一下User里面的match可以发现
match.path:
match.url:
一个是我们设计的路由，一个是当前访问的裸游；
match.path常用来构建新的路由。
match.url常用来构建嵌套的link
add
渲染出来：
http://localhost:3000/person/12/add
授权路由
在应用程序中，通常会根据用户的登录状态来限制用户访问某些路由。对于未经授权的页面（如“登录”和“忘记密码”）与已授权的页面（应用程序的主要部分）看起来不一样也是常见的。为了解决这些需求，需要考虑一个应用程序的主要入口点：
class App extends React.Component {
render() {
return (
)
}
}
使用 react-redux 与 React Router v4 非常类似，就像之前一样，只需将 BrowserRouter
包在
中即可。
通过这种方法可以得到一些启发。第一个是根据我们所在的应用程序的哪个部分，在两个顶层布局之间进行选择。像访问 /auth/login 或 /auth/forgot-password 这样的路径会使用 UnauthorizedLayout —— 一个看起来适于这种情况的布局。当用户登录时，我们将确保所有路径都有一个 /app 前缀，它使用 AuthorizedRoute 来确定用户是否登录。如果用户在没有登录的情况下，尝试访问以 /app 开头的页面，那么将被重定向到登录页面。
v4 中一个惊人的新功能是能够为特定的目的创建你自己的路由。它不是将 component 的属性传递给
class AuthorizedRoute extends React.Component {
componentWillMount() {
getLoggedUser()
}
render() {
const { component: Component, pending, logged, ...rest } = this.props
return (
{
if (pending) return Loading...
return logged
? vs
组件看起来像这样：
const PrimaryHeader = () => (
Welcome to our app!
)
使用
NavLink 带 exact 属性等价于 v3 的 ，而且更稳定。
参考文章:
[译] 关于 React Router 4 的一切
All About React Router 4