react-router实现类似vue-router中beforeEach的功能

react-router中并没有vue-router的路由导航守卫（如beforeEach）等api。

具体原因，作者已经在github上做出了回答

意思是您可以在渲染功能中执行此操作。JSX不需要API，因为它更灵活。

在react中可以使用高阶组件hoc在渲染route组件之前判断登录状态

App.tsx

import React from 'react'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import { AuthButton, PrivateRoute } from './components'
import RootProvider from './RootProvider'
import { Home, Login, User } from './pages'

const App: React.FC = () => {
  return (
    


home
          

user
        

  )
}

export default App

PrivateRoute是一个高阶组件，主要作用是判断登录状态，如果没有登录则跳转到登录页面。

PrivateRoute.tsx

import React from 'react'
import { useAuth } from '../../RootProvider'
import { Route, Redirect, RouteProps } from 'react-router-dom'

export const PrivateRoute: React.FC = ({ children, ...props }) => {
  const { user } = useAuth()
  return (
    
        user ? (
          children
        ) : (
          
        )
      }
    />
  )
}

全局的context

import React, { createContext, Context, useContext } from 'react'
import { useLogin } from './hooks'

const AuthContext: Context = createContext({})

const RootProvider: React.FC = ({ children }) => {
  const auth = useLogin()
    
  return (
    
      {children}
    
  )
}

export const useAuth = () => useContext(AuthContext)

export default RootProvider
 

使用到的hook

import { useState } from 'react'

export const useLogin = () => {
  const [user, setUser] = useState(null)

  const login = cb => {
    setUser('lin')
    cb()
  }

  const logout = cb => {
    setUser(null)
    cb()
  }

  return {
    user,
    login,
    logout
  }
}

最后的效果：

• 没有登录 点击跳转home和user页面都会跳转到登录页面

• 登录后可以正常访问user和home页面