react路由-路由表方式

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'

/**
 * 两种路由模式的组件：
 * BowserRouter（History模式）
 * HashRouter（Hash模式）
*/
import {BrowserRouter} from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
)

router文件夹

index.tsx

import React,{lazy} from 'react'

import Login=lazy(()=>import('@/views/Login/index'))
import Home from '@/views/Home'
import Page1=lazy(()=>import('@/views/Page1'))
import Page2=lazy(()=>import('@/views/Page2'))
import Page301=lazy(()=>import('@/views/Page301'))

import {Navigate} from 'react-router-dom'

// 懒加载模式的组件的写法，外面需要套一层loading的提示加载组件
const withLoadingComponent=(comp:JSX.Element)=>{
  <React.Suspense fallback={<div>Loading...</div>}>
    {comp}
  </React.Suspense>
}

const routes=[
  {
    path:'/',
    element:<Navigate to='/page1'>
  },
  // 嵌套路由开始
  {
  	path:'/',
  	element:<Home/>,
  	children:[
  	  {
  	    path:'/page1',
  	    element:withLoadingComponent(<Page1/>)
  	  },
  	  {
  	    path:'/page2',
  	    element:withLoadingComponent(<Page2/>)
  	  },
  	  {
  	    path:'/page3/page301',
  	    element:widthLoadingComponent(<Page301/>)
  	  }
  	]
  },
  // 嵌套路由结束
  {
    path:'/login',
    element:<Login/>
  },
  // 访问其余路径的时候直接跳到首页
]
export default routes;

顶级组件App.tsx

无路由拦截

import {useRoutes} from 'react-router-dom'
import router from './router'

function App(){
  const outlet=useRoutes(router)
  return {
    <>
      {outlet}
    </>
  }
}
export default App

路由拦截

import {useRoutes,useLocation,useNavigate} from 'react-router-dom'
import {useEffect} from 'react'
import router from './router'

// 去往首页的组件
function ToPage1(){
  const navigateTo=useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(()=>{
    // 加载完组件之后执行这里的代码
    navigateTo('/page1')
  },[])
  return <div></div>
}
// 去往登录页的组件
function ToLogin(){
  const navigateTo=useNavigate()
  useEffect(()=>{
    navigateTo('/login')
  },[])
  return <div></div>
 }
// 路由拦截
function BeforeRouterEnter(){
  const outlet=useRoutes(router)
  /**
   * 后台管理系统两种经典的跳转情况
   * 1、访问的是登录页面，并且有token，跳转到首页
   * 2、访问的不是登录页面，并且没有token，跳转到登录页
   * 3、其余的都可以正常放行
  */
  const location=useLocation()
  let token=localStorage.getItem('react-ts-token')
  if(location.pathname==='/login'&&token){
    // 这里不能直接用useNavigate来实现跳转，因为BeforeRouterEnter是一个正常的JSX组件
    message.warning('请先退出')
    return <ToPage1/>
  }else if(location.pathname!=='/login'&&!token){
    message.warning('请先登录')
    return <ToLogin/>
  }
}
function App(){
  return (
    <>
      <BeforeRouterEnter/>
    </>
  )
}
export default App