什么是前端路由

现代的前端页面大多是SPA(单页面应用程序)， 也就是只有一个HTML页面的程序，这样用户体验好，服务器压力小，所以更受欢迎。但是一个页面可能有很多功能，比如一个页面，可能会有导航栏，有内容页。头部区域和尾部区域，那么如果是互联网刚起来的那几年，每个导航栏可能就是一个a标签，点击跳转新页面。但是这种跳转不管是对于服务器还是对于用户来说，可能都是不友好的。那么怎么能实现这样一种功能呢，就是我们点击导航栏的时候，只有内容刷新？你用点击事件固然可以这么做。但是，react-router提供了一种更简单的方式，就是以路由的方式来映射不同的组件，你操作了不同的路由，就可以调用不同的组件，实现不同的页面。

React-Router

React Router 是一个基于 React之上的强大路由库，可以实现无刷新的条件下切换显示不同的页面。

react-router主要分成了几个不同的包：

• react-router: 实现了路由的核心功能

• react-router-dom： 基于 react-router，加入了在浏览器运行环境下的一些功能

• react-router-native：基于 react-router，加入了 react-native 运行环境下的一些功能

• react-router-config: 用于配置静态路由的工具库

  那这里，我们就先看我们最常用到的react-router-dom组件

  react-router 6 新特性

  • v6版本移除了之前的Switch,引入了新的替代者Routes，Routes和Route配合使用，且必须用Routes包裹Route

    当url发生变化时，Routes会查看其所有子Route元素找到最佳匹配并呈现组件

    Route caseSensitive属性用于指定：匹配时是否区分大小写（默认为false）

  • component 改为 element
  • 组件传递props ,比如传递一个name:‘kobe’ 的属性

    //传递
    
    //接受
    function HomeNews(propsName) {
    console.log(propsName);//{name: 'kobe'}
      return (
          {propsName.name}
      )
    }
    

    • 路由重定向 Navigate,代替之前的Redirect

      react-router-dom

      react-router-dom下主要的组件有BrowserRouter，HashRouter，HashRouter，Link，NavLink，switch，redirect，我们一个个看一下

      BrowserRouter

      它的主要作用是为React应用程序提供客户端路由功能。它使用 HTML5 的 history API 来处理URL的变化，并根据URL的路径匹配渲染相应的组件。它通常是应用的根组件，用于包裹整个应用。

      HashRouter

      HashRouter和BrowserRouter作用差不多。都是用来绑定path和component的，但是两者采用的模式不一样，我们前面说过，BrowserRouter使用 HTML5 的 history API，而HashRouter是基于hash来实现的

      HashRouter和BrowserRouter的区别和使用场景

      HashRouter

      • 基于hash模式：页面跳转原理是使用了location.hash、location.replace；和vue router的hash模式实现一致
      • 比较丑：在域名后，先拼接/#，再拼接路径；也就是利用锚点，实现路由的跳转；如：http://www.abc.com/#/xx

        BrowserRouter

        • 基于history模式：页面跳转原理是使用了HTML5为浏览器全局的history对象新增了两个API，包括 history.pushState、history.replaceState；不兼容IE9及以下版本。
        • 更加优雅： 直接拼接路径；如：http://www.abc.com/xx

          Routes

          Routes组件用于定义应用程序的不同路由和对应的组件。它允许我们在应用程序中定义多个路由，每个路由对应一个特定的组件，当用户访问不同的路由时，会渲染相应的组件。Routes组件还可以设置路由参数、嵌套路由、重定向等功能，帮助我们构建复杂的单页面应用程序。通过Routes组件，我们可以实现页面之间的切换和导航，提供更好的用户体验。

          Route

          route用于定义路由的规则,就是我这个路由对应哪个组件。其实从作用上我们也能知道，route至少接收两个参数，一个用来定义path路径，一个用来指定调用的组件component。

          接下来我们看一个简单的示例，访问/a路径的时候，展示a的页面，我访问/b的时候，显示b的页面

          import React, {Component} from 'react';
          import { BrowserRouter, Routes, Route } from "react-router-dom";
          class App extends Component {
              render() {
                  return (
                      // 注意此处要用BrowserRouter包括根组件
                      
                          {/*定义多个路由组件组件*/}
                          
                              
                              
                          
                      
                  );
              }
          }
          class A extends Component {
              render() {
                  return (
                      
          
                          
          A
                      
                  );
              }
          }
          class B extends Component {
              render() {
                  return (
                      
          
                          
          B
                      
                  );
              }
          }
          export default App;
          

          Link

          我们知道，当我们想实现局部刷新的时候，我们可能会使用事件来处理。react路由里面也提供了一个更加简洁的api，即link组件，这个组件用于创建导航链接。它会生成一个 标签，并处理点击事件以避免浏览器重新加载页面。你可以使用 to属性和route的path属性绑定来实现这个功能。我们来试一下

          render() {
                  return (
                      // 注意此处要用BrowserRouter包括根组件,可以提到index.js里面包裹App标签
                      
                          {/*这是导航区域*/}
                          

          • 我是a
          • 我是b
          {/*定义多个路由组件组件 展示组件的返回值*/} ); }

          link的to属性看定义为一个对象，相关属性如下

          • pathname: 表示要链接到的路径的字符串。
          • search: 表示查询参数的字符串形式。
          • hash: 放入网址的 hash，例如 #a-hash。
          • state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源

            {
                                        pathname: '/a',
                                        search: '?id=1',
                                        hash: '#someHash',
                                        state: { fromWechat: true }
                                    }}我是a
            

            NavLink

            可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。相关属性如下

            • exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。
            • strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。
            • location 接收一个location对象，当url满足这个对象的条件才会跳转
            • isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败

              最简单的例子就是当路由是/a的时候，会给绑定当前路由的a标签添加一个active的类属性。

              Navigate

              将一个路由组件重定向到某个新地址

              路由嵌套

              我们知道，在现实中，写的路由大部分都是有统一前缀的，那么我们就要在前缀的基础上写路由，而不是所有的路由都把前缀带上，那么我们怎么写呢，我们来看一下

              import React, {Component} from 'react';
              import {Routes, Route,Link } from "react-router-dom";
              class App extends Component {
                  A=()=>{
                      return 
              我是a
                  }
                  B=()=>{
                      return 
              我是B
                  }
                  render() {
                      return (
                          // 注意此处要用BrowserRouter包括根组件,可以提到index.js里面包裹App标签
                          
              
                              
              我是a
                                  
               我是b
                              
                              {/*在这里配置前缀*/}
                              
                                  
                                      this.A()}
                                      this.B()}
                                  
                              
                          
                      );
                  }
              }
              export default App;
              

              • 路由的集中管理

                我们看到，在代码里面写满了路由，明显是很low的，那么我们能不能把路由集中管理起来呢,比如我新建了一个路由文件，叫Route.jsx

                import {useRoutes} from "react-router-dom";
                import A from "../A/A"
                import B from "../B/B"
                const DefineRoute=()=>{
                    return useRoutes(
                        [
                            // 单路由
                            {
                                path:"/",
                                element:
                Home
                            },
                            //嵌套路由
                            {
                                path:"/h5",
                                children:[
                                    {
                                        path:"a",
                                        element:
                                    },
                                    {
                                        path:"b",
                                        element:
                                    }
                                ]
                            }
                        ]
                    )
                }
                export default DefineRoute
                

                • 完毕之后我需要在使用的地方把它渲染出来，比如我在index.js里面渲染，完成之后，即可使用路由

                  import DefineRoute from "./components/Route/Route"
                  const app= 
                  

                  路由参数

                  前面我们说了很多路由相关的基础知识呢，那么最重要的问题来了，路由的参数我们怎么获取？我们来看一下

                  我们改一下路由b

                  {
                     path:"b/:age/:name",
                     element:
                  }
                  

                  • 修改b组件

                    import React from 'react';
                    import { useParams,useSearchParams } from "react-router-dom";
                    function B() {
                        const [search,setsearch] = useSearchParams()//返回search参数 和 更新search参数的函数
                        const {age,name}= useParams();
                        console.log(search.get("title"))    // ['123']
                        console.log(search.getAll("title"))    // ['123']
                        return (
                            
                    
                                
                    B
                                
                    age:{age}
                                
                    name:{name}
                                ()=setsearch('id=2&title=更新search')}>点我更新search参数
                            
                        );
                    }
                    export default B;
                    

                    相关参考

                    react-router 6 新特性总结

                    react-route6 封装