react-router路由守卫

安装redux和react redux

index.js 用react-redux的Provider复合组件实现逐层传参，导入store作为要传的参数

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root"),
);

src/store/index.js 使用redux的createStore和combineReducers，定义了reducer,传给store

import { createStore, combineReducers } from "redux";

const initialUser = {
  isLogin: false,
  user: { name: null },
};
function loginReducer(state = { ...initialUser }, action) {
  switch (action.type) {
    case "getUserInfo":
      return { ...initialUser };
    case "loginSuccess":
      return { ...state, isLogin: true, user: { name: "xiaoming" } };
    default:
      return { ...initialUser };
  }
}
const store = createStore(
  combineReducers({
    user: loginReducer,
  }),
);

export default store;

src/pages/RouterPage.js 定义页面和BrowserRouter,Link,Route

import React, { Component } from "react";
import {
  HashRouter,
  BrowserRouter,
  Link,
  Route,
  Switch,
} from "react-router-dom";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
import PrivateRoute from "./PrivateRoute";
import LoginPage from "./LoginPage";

export default class RouterPage extends Component {
  render() {
    const id = 1235;
    return (
      <div>
        <h3>RouterPage</h3>
        <BrowserRouter>
          <Link to="/">首页</Link>
          <Link to="/user">用户中心</Link>
          <Link to={"/search/" + id}>搜索</Link>
          <Link to="/aaa">不知道的页面</Link>

          <Switch>
            <Route
              exact
              path="/"
              component={HomePage}
              // children={() => <div>hah</div>}
              // render={() => <div>render</div>}
            />
            <Route exact path="/home" component={HomePage} />
            {/* <Route path="/user" component={UserPage} /> */}
            <PrivateRoute path="/user" component={UserPage} />
            <Route path="/login" component={LoginPage} />

            <Route path="/search/:id" component={Search} />

            <Route component={() => <div>404</div>} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

function Search(props) {
  console.log("props", props);
  const { id } = props.match.params;
  return (
    <div>
      Search: {id}
      <Link to="/search/detail">{id}详情</Link>
      <Route path="/search/detail" component={Detail} />
    </div>
  );
}

function Detail(props) {
  return <div>Detail</div>;
}

src/pages/PrivateRoute.js 点击用户中心 获取登录状态 由于第一次是false 所以重定向到登录页 如果登录状态是true跳转到用户页

import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

class PrivateRoute extends Component {
  render() {
    const { path, component, isLogin } = this.props;
    if (isLogin) {
      return <Route path="/user" component={component} />;
    }
    return (
      <Redirect
        to={{
          pathname: "/login",
          state: { redirect: path },
        }}
      />
    );
  }
}

export default connect(state => {
  return { isLogin: state.user.isLogin };
})(PrivateRoute);

src/pages/LoginPage.js 未登录显示登录页面 点击登录 重定向跳转到user页

import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";

class LoginPage extends Component {
  render() {
    const { isLogin, login, location } = this.props;
    const { redirect = "/" } = location.state || {};
    if (isLogin) {
      return <Redirect to={redirect} />;
    }
    return (
      <div>
        <h3>LoginPage</h3>
        <button onClick={login}>login</button>
      </div>
    );
  }
}

export default connect(
  state => {
    console.log(state);
    return { isLogin: state.user.isLogin };
  },
  {
    login: () => ({ type: "loginSuccess" }),
  },
)(LoginPage);