react-router v6路由拦截路由守卫路由鉴权

一个很常见的需求：有些路由，需要登录才能访问，不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来实现路由鉴权。

react-router v6稳定版出来了，有许多改变，以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章，学废了！整理学习一下分享出来。

index.js 如下，路由写在了这里面：

import { AuthProvider, RequireAuth } from './Auth.js'
ReactDOM.render(
   <HashRouter>
     <AuthProvider>
       <Routes>
         <Route path="/" element={<App />}> // 嵌套路由
           <Route path="user" element={<User />} />
           <Route path="upload" element={
             <RequireAuth> // 封装的拦截组件，已登录则返回它children组件，未登录则导航到登录页
               <MovieUpload /> // 需要登录才能使用的组件
             </RequireAuth>
           }
           />
         </Route>
       </Routes>
     </AuthProvider>
   </HashRouter>,
document.getElementById('root