React—12—ReactRouter

一、路由

◼ 路由其实是网络工程中的一个术语：

 在架构一个网络时，非常重要的两个设备就是路由器和交换机。

 当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：

 事实上，路由器主要维护的是一个映射表；

 映射表会决定数据的流向；

◼ 路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：

 后端路由阶段；

 前后端分离阶段；

 单页面富应用（SPA）；

◼ 早期的网站开发整个HTML页面是由服务器来渲染的.

 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.

◼ 但是, 一个网站, 这么多页面服务器如何处理呢?

 一个页面有自己对应的网址, 也就是URL；

 URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理；

 Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.

◼ 上面的这种操作, 就是后端路由：

 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.

 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

◼ 后端路由的缺点:

 一种情况是整个页面的模块由后端人员来编写和维护的；

 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码；

 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情；

◼ 前端渲染的理解：

 每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；

 需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；

 同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了；

◼ 前后端分离阶段：

 随着Ajax的出现, 有了前后端分离的开发模式；

 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中；

 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；

 并且当移动端(iOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可；

 目前比较少的网站采用这种模式开发；

◼ 单页面富应用阶段:

 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.

 也就是前端来维护一套路由规则.

◼ 前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新。

二、ReactRouter

◼ 目前前端流行的三大框架, 都有自己的路由实现:

 Angular的ngRouter

 React的ReactRouter

 Vue的vue-router

◼ React Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。

 目前React Router6.x已经非常稳定，我们可以放心的使用；

◼ 安装React Router：

 安装时，我们选择react-router-dom；

 react-router会包含一些react-native的内容，web开发并不需要；

npm install react-router-dom

◼ react-router最主要的API是给我们提供的一些组件：

◼ BrowserRouter或HashRouter

 Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；

 BrowserRouter使用history模式；

 HashRouter使用hash模式；

三、路由的映射配置、跳转

分别是<Routes> <Route> <Link> <NavLink> <Navigate>组件。

Not Found页面配置：

主要是Route组件里，path = ‘*’

匹配到的组件就会渲染在路由表所在的地方，

如果所有的路由都在App.jsx里写，那么子路由就得专门有个占位符了《Outlet了》，不然没法渲染。


import { Routes, Route, Link, Navigate } from 'react-router-dom';
export class App extends PureComponent {
  render() {
    return (
      <div>
        <div>
          我是头部内容
          <Link to="/home">首页</Link>
          <Link to="/recommend">推荐</Link>
          <hr /> <hr />
          <div style={{ marginBottom: '150px' }}></div>
        </div>

        <div>
          我是body部内容
          <Routes>
            <Route path="/" element={<Navigate to="/home" />}></Route>

            <Route path="/home" element={<Home />}>
              {/* reactrouter在嵌套路由时，子路由必须使用绝对路径或者相对路径的写法：
              绝对路径:子路由必须要带上父路由
              相对路径:相对路由的方式写,不要加  /
              这点和vue不一样，vuerouter完全根据path匹配。 
              */}
              {/* 错误写法,未带上父路由:  <Route path="/foo" element={<HomeFoo />}></Route> */}
              {/* 绝对路径写法：带上父路由/home */}
              <Route path="/home/foo" element={<HomeFoo />}></Route>
              {/* 相对路径写法，不加/ */}
              <Route path="bar" element={<HomeBar />}></Route>
            </Route>

            <Route path="/recommend" element={<Recommend />}></Route>
            <Route path="*" element={<NotFound></NotFound>}></Route>
          </Routes>
        </div>

      </div>
    );
  }
}
const mapStateToProps = state => ({
  counter: state.counterSlice.counter
});

export default connect(mapStateToProps)(App);

四、路由的嵌套

主要是，直接在Route组件里，插入子路由组件。

然后在实际要显示的组件里，使用<Outlet>组件做占位符，vue是<RouterView>组件做占位符。

五、js代码操作路由

刚刚那么多全部都是组件《Link to=’xxx‘》《Navigate to=‘xxx'》跳转，这次我们用js代码来跳转。

◼ 在Router6.x版本之后，代码类的API都迁移到了hooks的写法：

 如果我们希望进行代码跳转，需要通过useNavigate的Hook获取到navigate对象进行操作；

 那么如果是一个函数式组件，我们可以直接调用，但是如果是一个类组件呢？（类组件直接调用会报错）

5.1函数式组件

import { Routes, Route, Link, Navigate, useNavigate } from 'react-router-dom';
export function App() {
  const navigate = useNavigate();
  return (
    <div>
      <div>
        我是头部内容
        {/* <Link to="/home">首页</Link>
        <Link to="/recommend">推荐</Link> 
        函数式组件想调用非常简单，直接通过hook拿到navigate方法， 然后button直接调用这个方法即可
        */}
      <button onClick={e => navigate('/home')}>首页</button>
      <button onClick={e => navigate('/recommend')}>推荐</button>

      </div>
      <div>
        我是body部内容
        <Routes>
          <Route path="/recommend" element={<Recommend />}></Route>
          <Route path="*" element={<NotFound></NotFound>}></Route>
        </Routes>
      </div>

    </div>
  );
}

export default App;

如果是类组件，需要自己写一个高阶组件，比如叫withRouter，把useNavigate通过props的形式传递给类组件了，这样就可以使用了。

六、路由参数传递

方式一：动态路由参数

这种需要我们在定义的路由时候，就定义一个动态路由，比如/home/:id，那么我们传递/home/foo的时候，将不会走到HomeFoo组件，仍然是Home组件，并且会传递一个参数，

参数可以通过useParams()Hooks取到。

 <button onClick={e => navigate('/detail/123')}>详情</button>

 <Route path="/detail/:id" element={<Detail />}></Route> 

 const params = useParams(); //通过params.id取到动态路由参数的值。

方式二：query参数

这种就是在跳转路由的时候，拼接要给query，比如/home？name=why&age=18，这样当我们跳转到Home组件时，参数可以通过useSearchParams() 取到。

 <button onClick={e => navigate('/detail?name=why&age=18')}>详情</button>

 <Route path="/detail" element={<Detail />}></Route>

    // 把searchParams转化为query，才是我们需要的
    const [searchParams] = useSearchParams();
    const query = Object.fromEntries(searchParams);

七、路由的配置文件和懒加载

1.配置文件

我们可以把所有的路由都放在一个配置文件里，然后需要开启前端路由跳转的地方使用useRoutes(路由配置数组)占位即可，当然子路由(即嵌套路由)还是使用《Outlet》组件去占位。

import React from 'react'
import Home from '../pages/Home';
// import Recommend from '../pages/Recommend';
import HomeBar from '../pages/HomeBar';
import HomeFoo from '../pages/HomeFoo';
import NotFound from '../pages/NotFound';
import Detail from '../pages/Detail';
import { Navigate } from 'react-router-dom';


const Recommend = React.lazy(() => import('../pages/Recommend'))

export const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '/home/foo',
        element: <HomeFoo />
      },
      {
        path: '/home/bar',
        element: <HomeBar />
      }
    ]
  },
  {
    path: '/recommend',
    element: <Recommend />
  },


  // 动态路由参数走这里
  {
    path: '/detail/:id',
    element: <Detail />
  },
  // query参数走这里
  {
    path: '/detail',
    element: <Detail />
  },
  {
    path: '*',
    element: <NotFound />
  }
];

App.jsx里

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

<div>
        我是body部内容
        {/* <Routes>
          <Route path="/" element={<Navigate to="/home" />}></Route>
          <Route path="/home" element={<Home />}>
            <Route path="/home/foo" element={<HomeFoo />}></Route>
            <Route path="bar" element={<HomeBar />}></Route>
          </Route>
          <Route path="/recommend" element={<Recommend />}></Route>
          <Route path="/detail" element={<Detail />}></Route>
          <Route path="*" element={<NotFound></NotFound>}></Route>
        </Routes> */}

        {useRoutes(routes)}
      </div>

7.2懒加载

有些文件太大，需要调用到的时候，再去加载这个文件。

使用import写法，那么webpack会识别，把这个文件单独打包，并且只有调用到的时候才加载这个文件，加快首屏渲染速度。

const Recommend = React.lazy(() => import('../pages/Recommend'))

但是有个问题，就是如果我们立马调用了recommend组件，但是这个时候recommend文件由于太大了还没加载出来，所以会报错，这个时候我们需要给包裹一个suspense组件做loading，不然会报错。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <Suspense fallback={<div>组件加载中，请稍后</div>}>
    <HashRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </HashRouter>
  </Suspense>

);

posted @ 2025-03-07 19:48 Eric-Shen 阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

Eric-Shen