依旧是地址

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 }

      }}/>

    )

  )}/>

)