React路由(React笔记之五)

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢!

React路由介绍

现在前端的项目一般都是SPA单页面应用,不再是以前多个页面多套HTML代码项目了,应用内的跳转不需要刷新页面就能完成页面跳转靠的就是路由系统

React路由主要有两种:

• BrowerRouter路由: 就像平常网站www.baidu.com/test 这就是一个路由

• HashRouter 路由: 比BrowerRouter多出了一个#符号,使用URL的哈希值实现,比如www.baidu.com/#/test

路由配置: createHashRouter或者createBrowserRouter二选一就可以,这里是为了显示效果

import { createHashRouter ,createBrowserRouter} from 'react-router-dom'
import Home from '../pages/Home';
import Test from '../pages/Test';


//路由
export const globalRouters = createHashRouter/createBrowserRouter([
    {
        // 首页
        path: '/',
        element: <Home />,
    },
    {
        // 测试页面
        path: '/test',
        element: <Test />,
    }
])

BrowerRouter路由

路由是什么样的就是展示成什么样子,比如test页面

编辑

优点是路由所见即所得

缺点是在服务器渲染的时候需要后端坐映射:

nginx配置

location /web {
   try_files $uri /index.html;
}

否则的会显示找不到页面

编辑

HashRouter路由

HashRouter路由多了一个#分割域名和路由,这样的好处就是服务端渲染的时候不需要做任何配置,就可以直接显示页面:

编辑

所以我们一般开发通常采用HashRouter路由,这样不需要后端同学配置

React路由守卫

在vue里面通过router.beforeEach就可以直接拦截路由,比如用户登录失效之类的

router.beforeEach((to, _from) => {
  nprogress.start() // 开始加载进度条
  // 用户登录失效
  if (to.meta.requiresAuth && !store.state.login.UserInfo.name) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath }
    }
  }
  // 如果页面不存在
  if (!to.name && to.path !== '/404') {
    return {
      path: '/404'
    }
  }
})

但是我们React路由原生没有这个函数,所以需要自己处理拦截效果

以下是基于React Router V6 实现的一个简单的路由守卫校验

src/router/index.tsx文件

import { Route, Routes, Navigate } from 'react-router-dom'
import { ReactNode } from 'react';
import Test from '../pages/Test';
import Login from '../pages/Login';
import Error404 from '../pages/404';
import Home from '../pages/Home';
import React from 'react';

//路由校验
const Router = () => {

  const routes = [
    {
      path: '/',
      auth: false,
      component: <Home />,
    },
    {
      path: '/test',
      auth: false,
      component: <Test />,

    },
    {
      path: '/*',
      auth: false,
      component: <Error404 />
    }
  ]


  //路由校验
  const RouteChildren = (param: any) => {
    //判断是否已经登录逻辑,我此处忽略了
    const isLogin = false
    return (
      param.map((item: { path: string, auth: boolean, component: ReactNode, child?: any }) => {
        return (
          <Route path={item.path} element={!isLogin ? <Navigate to='/login' replace={true}></Navigate> : item.component}
            key={item.path}
          >
            {
              item?.child && RouteChildren(item.child)
            }
          </Route>
        )
      })
    )
  }

  return (
    <Routes>
      {/* 如果没有登录的话 渲染那里全部阻塞,所以需要提前配置一个login */}
      <Route path={"/login"} element={<Login />} />
      {
        RouteChildren(routes)
      }
    </Routes >
  )

}

export default Router;

src/pages/index.tsx

import React from 'react';
// import './index.css';
import { HashRouter } from 'react-router-dom'
import RouterMap from '../router/index.tsx'
function App() {
    return (
        <HashRouter>
            <RouterMap />
        </HashRouter>
    )
}
export default App

总结:React的路由可以管理整个React应用,并且只需要使用一次即可,React路由的一切展示都是组件,写React路由其实就是在写组件