React-router4 第三篇 BasicURL ParametersRedirects (Auth) 谷歌翻译：重定向

依旧是地址

https://reacttraining.com/react-router/web/example/auth-workflow

上来一步走 先导入模块

import React, { PropTypes } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

关键组件

<Redirect to={{ pathname: "/path", other: "" }}/>

官方代码

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton/>
      <ul>    // 同样，先定义a标签
        <li><Link to="/public">Public Page</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
      </ul>
      // 再定义路由  两个看似很普通的路由，和一个不那么普通的路由，，官方例子中，点击/protected路由，却发现地址栏访问了login路由。。
      <Route path="/public" component={Public}/>
      <Route path="/login" component={Login}/>
      <PrivateRoute path="/protected" component={Protected}/> // 原来这里确实访问了/protected 但是却在<PrivateRoute />组件中又被跳走了
    </div>
  </Router>
)

关键代码 在这里！！！

ES6的 ...rest 的展开运算符，，很嚣张，很暴力！，不懂的话，百度ES6 展开运算符，，在这里...rest 指代的是 path="/protected"

const PrivateRoute = ({ component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      React.createElement(component, props)
    ) : (
      <Redirect to={{            // 重定向组件来了，，Redirect是也。！！ 然后传参给pathname，，然后就重定向走了呀。。。顺便可以加点参数什么的，另一头就可以接受=收了
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)