React-Router示例（重定向与withRouter）

1.withRouter作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

 

默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/detail')跳转到对应路由的页面

然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props

 

2.Redirect渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置

- to: object

要重定向到的位置。

`
<Redirect to={{
pathname: '/login',
search: '?utm=your+face',
state: { referrer: currentLocation }
}}/>

- push: bool

当为true时，重定向会将新条目推入历史记录，而不是替换当前条目。

`

<Redirect push to="/somewhere/else"/>

- from: string

要重定向的路径名。这只能用于在<Switch>内部呈现<Redirect>时匹配位置。
有关详细信息，请参阅<Switch children>。https://reacttraining.com/web/api/Switch/children-node

`

<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
</Switch>

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

function AuthExample() {
  return (
    <Router>
      <div>
        <AuthButton />
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/protected" component={Protected} />
      </div>
    </Router>
  );
}

/*登录控制*/
const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {//登录授权
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  signout(cb) {//退出登录
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

/*登录成功组件*/
const AuthButton = withRouter(
  /*withRouter作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上*/
  ({ history,location,match }) =>{
    // console.log(history);
    // console.log(location);
    // console.log(match);

    return fakeAuth.isAuthenticated ? (//已登录认证就显示下面的组件
      <p>
        Welcome!{" "}
        <button
          onClick={() => {//退出按钮
            fakeAuth.signout(() => history.push("/"));
          }}
        >
          Sign out
        </button>
      </p>
    ) : (//没有登录显示下面的组件
      <p>You are not logged in.</p>
    )
  }
);

/*重定向路由组件，返回的是一个Route路由*/
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (//没有登录就显示下面的路由匹配到登录组件
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

/*公共页面无需登录就能访问*/
function Public() {
  return <h3>Public</h3>;
}

/*登录之后访问的组件*/
function Protected() {
  return <h3>Protected</h3>;
}

/*登录组件*/
class Login extends Component {
  state = { redirectToReferrer: false };//重定向状态

  login = () => {//登录方法
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true });//登录进行重定向
    });
  };

  render() {
    let { from } = this.props.location.state || { from: { pathname: "/" } };
    let { redirectToReferrer } = this.state;
    console.log(from);//Object {pathname: "/protected", search: "", hash: "", state: undefined, key: "0hr10n"}
    if (redirectToReferrer) return <Redirect to={from} />;//登录之后重定向到来时的这个组件

    return (//如果没有登录就显示这个登录组件
      <div>
        <p>You must log in to view the page at {from.pathname}</p>
        <button onClick={this.login}>Log in</button>
      </div>
    );
  }
}

export default AuthExample;

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

https://edu.51cto.com/lecturer/11857712.html 星星课堂web前端系列课程

https://edu.51cto.com/course/25959.html js设计模式课程

https://edu.51cto.com/course/23133.html js进阶与组件化实战课程

https://edu.51cto.com/course/24757.html jquery课程

https://edu.51cto.com/course/22392.html js基础与入门课程

https://edu.51cto.com/course/26063.html vue零基础入门课程

https://edu.51cto.com/course/22393.html xhtml与css基础入门课程