面试题：React Router版本更新中的导航守卫新特性

Question

在React Router版本更新后，导航守卫有了哪些新特性？请举例说明如何使用这些新特性来实现页面访问权限的控制。

Answer 1

React Router导航守卫新特性

1. 基于组件的路由守卫：在新的React Router版本中，可以更方便地在组件层面定义导航守卫逻辑。例如useNavigate和useLocation钩子，能够在函数式组件内轻松处理导航相关逻辑。
2. 异步导航守卫：支持异步操作，这在处理需要异步获取数据（如验证用户权限需从服务器获取数据）来决定是否允许导航的场景很有用。

实现页面访问权限控制示例

假设我们有一个需要用户登录后才能访问的页面ProtectedPage，以及一个登录状态管理isLoggedIn。

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useSelector } from'react-redux';// 假设使用redux管理登录状态

const ProtectedPage = () => {
    const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
    const location = useLocation();

    if (!isLoggedIn) {
        return <Navigate to="/login" state={{ from: location }} replace />;
    }

    return (
        <div>
            <h1>这是受保护页面</h1>
        </div>
    );
};

export default ProtectedPage;

在上述代码中，通过useLocation获取当前位置，当用户未登录时，使用Navigate将用户导航到登录页面，并通过state记录用户原本要访问的页面，以便登录后能返回原页面。这就是利用新特性实现页面访问权限控制的一种方式。