React Router--React Router4

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(
    ,
    document.getElementById('app')
)

上面代码中，用户访问根路由/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(
    ,
    document.getElementById('app')
)

路由直接被定义到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，这些将都被渲染。

Paste_Image.png

排他性路由
如果你只需要在路由列表里匹配一个路由，则使用 来启用排他路由：

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(
    ,
    document.getElementById('app')
)

在组建的props中，存在一个match对象，我们打印一下：

Paste_Image.png

我们可以拿到 当前组建的路由，因此在person.js可以这样

match 对象给我们提供了几个属性，包括 match.params、match.path、match.url
match.path vs match.url
在上述代码中，我们打印一下User里面的match可以发现
match.path:

match.path

match.url:

Paste_Image.png

一个是我们设计的路由，一个是当前访问的裸游；
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 的属性传递给 ，而是传递一个 render 回调函数：

class AuthorizedRoute extends React.Component {
  componentWillMount() {
    getLoggedUser()
  }

  render() {
    const { component: Component, pending, logged, ...rest } = this.props
    return (
       {
        if (pending) return 
Loading...
        return logged
          ? 
          : 
      }} />
    )
  }
}

vs
与 一样，但如果 匹配浏览器的 URL，那么它可以提供一些额外的样式能力。例如，在示例应用程序中，有一个
组件看起来像这样：

const PrimaryHeader = () => (
  

    
Welcome to our app!
    

      Home
      Users
      Products
    
  
)

使用 可以让我给任何一个激活的链接设置一个 active 样式。而且，需要注意的是，我也可以给它们添加 exact 属性。如果没有 exact，由于 v4 的包容性匹配策略，那么在访问 /app/users 时，主页的链接将处于激活中。
NavLink 带 exact 属性等价于 v3 的 ，而且更稳定。

参考文章:
[译] 关于 React Router 4 的一切
All About React Router 4