react-router-dom重定向

·  阅读 1422
react-router-dom重定向

知识点

  1. createContext 组件数据传递
  2. useHistory 路由跳转
  3. useLocation 钩子返回当前url的Location对象 类似于url
  4. Redirect 路由重定向
  5. useState() 状态管理
const [state, setState] = useState(initialState);
复制代码

在初始化状态下,数组中的获取的state值和传入的initialState值相等的 setState函数用来更新state值,接收一个新的参数更新state值,并重现渲染加入队列。

  • 启用状态

  • 初始化

  • 读取

  • 更新

react-router-dom v5.1.0 新增useHistor钩子 hook

正文

父组件

import React , { useContext, createContext, useState } from 'react';
import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
    Redirect,
    useHistory,
    useLocation
} from 'react-router-dom';


// react-router-dom v5.1.0 新增useHistor钩子 hook
class AuthExample extends React.Component {
    render () {
        return (
            <ProvideAuth>
                <Router>
                    <div>
                        <AuthButton />
                            <ul>
                                <li>
                                    <Link to="/public">Public Page</Link>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <Link to="/protected"> Protected Page</Link>
                                </li>
                            </ul>
                            <Switch>
                                <Route path="/public">
                                    <PublicPage></PublicPage>
                                </Route>
                                <Route path="/login">
                                    <LoginPage></LoginPage>
                                </Route>
                                <PrivateRoute path="/protected">
                                    <ProtectedPage></ProtectedPage>
                                </PrivateRoute>
                            </Switch>
                    </div>
                </Router>
            </ProvideAuth>
        )
    }
};
复制代码

AuthButton子组件

根据useAuth返回值,显示是否登陆成功,并改变history路由状态

function AuthButton () {
    let history = useHistory();
    let auth = useAuth();
    console.log(auth);
    return auth.user ? (
        <p>
            Welcome !{''}
            <button onClick={ () => { auth.signout (() => history.push('/')); }}>
                Sign out
            </button>
        </p>
    ) : (
        <p>You are not logged in.</p>
    )
};
复制代码

PrivateRoute子组件

  • children: 如果用户已经登录显示内容
  • location 登陆后的路由信息
  • ...rest 扩展运算符 从rest取参数location,判断用户已经登录,显示childern内容,否则重定向到'/login',重新登录,并传值state,内容为location,
// 登陆后显示的内容
function ProtectedPage() {
    return <h3>Protected</h3>;
}
    
    
function PrivateRoute ( {children ,...rest  }) {
    let auth = useAuth();
    console.log('PrivateRoute组件开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
    console.log(children);       
    console.log( { ...rest } );
    return (
        <Route
            { ...rest }
            render = { ( { location } ) => auth.user ? ( children ) : (
                <Redirect to={{ pathname:"/login",state: { from:location } }} />
            ) }
        ></Route>
    )
};
复制代码

LoginPage子组件

  • useHistory() 获取 路由信息
  • useLocation() 获取location 信息
  • useAuth() 获取登录信息
  • useLocation 钩子返回当前url的Location对象 类似于url
function LoginPage () {
    let history = useHistory();
    let location = useLocation();
    let auth = useAuth();
    console.log(auth);
    let { from } = location.state || { from : {pathname:'/'} };
    let login = () => {
        auth.signin( () => {
            history.replace(from);
        })
    };
    return (
        <div>
            <p>You must log in to view the page at { from.pathname } </p>
            <button onClick={ login }> Log in</button>
        </div>
    )
};
复制代码

public 子组件

function PublicPage() {
    return <h3>Public</h3>;
}   
复制代码

操作

createContext

官网:zh-hans.reactjs.org/docs/contex…

const authContext = createContext();
 
 // 从authContext 中取值
function useAuth () {
    return useContext(authContext);
};
复制代码

ProvideAuth函数

  • createContext 父子组件 数据传值 适合于多层嵌套
function ProvideAuth({ children }) {
    const auth = useProvideAuth();
    console.log(auth);
    return (
    <authContext.Provider value={auth}>
        {/* 在容器中创建, Provider提供者 类似于标记,生产共享数据的地方,在value中定义需要共享的值  */}
        {children}
    </authContext.Provider>
    );
};
复制代码

fakeAuth函数

初始化登录信息,定义部分变量

const fakeAuth = {
    isAuthenticated: false,                        // 初始化状态值
    signin(cb) {
        fakeAuth.isAuthenticated = true;            // 修改状态值
        // 100ms改变路由状态
        setTimeout(cb, 100); // fake async      
    },
    signout(cb) {
        fakeAuth.isAuthenticated = false;           // 修改状态值
        // 100ms改变路由状态
        setTimeout(cb, 100);      
    }
};
复制代码

useProvideAuth函数

  • 通过 useState() 更新用户数据,改变登录路由状态
  • setUser 操作数据
function useProvideAuth() {
    const [user, setUser] = useState(null);

    const signin = cb => {
      return fakeAuth.signin(() => {
        console.log(fakeAuth);
        setUser("user");
        // 在登陆之后,改变路由状态
        cb();
      });
    };

    const signout = cb => {
      return fakeAuth.signout(() => {
        console.log(fakeAuth);
        setUser(null);
        // 在登陆之后,置空路由
        cb();
      });
    };

    return {
      user,
      signin,
      signout
    };
};
复制代码

react-router-dom 用户是否登录 进行Redirect重定向页面。

日记一日

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改