React Router 6:Router篇

·  阅读 1947
React Router 6:Router篇

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

前言

大家好,我是小阵 🔥,一路奔波不停的码字业务员
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋
加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟

开开心心学技术大法~~

开心

来了来了,他真的来了~

正文

React18用上了,React Router6你用上了吗?

react-router组成

router有三部分

  • react-router
  • react-router-dom
  • react-router-native

其中react-routerreact-router-domreact-router-native的核心,一般不作为单独包引入。

如果是web端,可直接引用react-router-dom

如果是react-native端,可以使用react-router-native

react-router-dom

组成

  • components
  • hooks
  • routers
  • utils

因为篇幅太长,前天写了React Router6:components篇,昨天写了React Router 6:hooks篇, 今天写下Router

routers

用于包裹所有路由信息的容器,通过React Hoc的方式注入更多路由信息

包含大概一下router类型

  • browser-router
  • Data-brawser-router
  • hash-router
  • history-router
  • memory-router
  • native-router
  • static-router

BrowserRouter

BrowserRouter是在 Web 浏览器中运行 React Router 的推荐router

BrowserRouter使用干净的 URL 将当前位置存储在浏览器的地址栏中,并使用浏览器的内置历史堆栈进行导航。

如:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
​
ReactDOM.render(
  <BrowserRouter>
    {/* The rest of your app goes here */}
  </BrowserRouter>,
  root
);
复制代码

DataBrowserRouter

大体跟BrowserRouter类似,但是加上了Data的加载

  • BrowserRouter只关注urlui相匹配

  • DataBrowserRouter除了关注urlui之外,还额外添加了数据注入,比如在匹配了一个表单路由的时候,将默认的data信息注入到该ui组件中

    • 为了配合这些注入的data信息,还额外暴露了一些处理api
    • loaderactionfetchers

注意:DataBrowserRouter内部不再需要嵌套Routes,而是直接包裹Route即可

如:

<DataBrowserRouter>
  <Route element={<Root />} />
</DataBrowserRouter>
复制代码

其他:我认为作为React Router的话,没必要将data与路由绑定起来,路由只应该做路由本身的事情,额外的工作应该在组件内部去单独处理。当然,必要的传入是需要的,至于这点,其他所有的Router也都可以满足

HashRouter

跟BrowserRouter不同,BrowserRouter的每一个路由url都是能直接请求到后端的,而HashRouter则是因为hash符号#的阻隔,所有的路由都不会请求到后端,也因此,url上没有BrowserRouter纯净

HashRouter常用于无法受恁控制的共享托管方案中

使用方式跟BrowserRouter相同

import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
​
ReactDOM.render(
  <HashRouter>
    {/* The rest of your app goes here */}
  </HashRouter>,
  root
);
复制代码

unstable_HistoryRouter

unstable_HistoryRouter基于history库,是history库的一个react实例

可以看到前缀unstable_,因为React Router使用过程中我们通常也会下载history库来作为编程式导航的工具来使用,而unstable_HistoryRouter内部也依赖一个history库,两个history库的版本是不一致的,官网的说明是

一旦我们有了检测不匹配版本的机制,这个 API 就会删除它的unstable_前缀。

使用方法如下:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";
​
const history = createBrowserHistory({ window });
​
ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);
复制代码

可以看到,HistoryRouter实际上就是基于传入的history={history}来判定内部的Router是HashRouter或者BrowserRouter

MemoryRouter

MemoryRouter不像之前的BrowserHistoryHashHistory,他不需要跟浏览器做交互,当然也没有浏览器的历史堆栈,而是将路由信息已数组的形式维护在内存中

所以通常用于没有浏览器界面的Router场景,比如基于React Router的测试场景

import * as React from "react";
import { create } from "react-test-renderer";
import {
  MemoryRouter,
  Routes,
  Route,
} from "react-router-dom";
​
describe("My app", () => {
  it("renders correctly", () => {
    let renderer = create(
      <MemoryRouter initialEntries={["/users/mjackson"]}>
        <Routes>
          <Route path="users" element={<Users />}>
            <Route path=":id" element={<UserProfile />} />
          </Route>
        </Routes>
      </MemoryRouter>
    );
​
    expect(renderer.toJSON()).toMatchSnapshot();
  });
});
复制代码

NativeRouter

见名知意,适用于React Native中的Router

import * as React from "react";
import { NativeRouter } from "react-router-native";
​
function App() {
  return (
    <NativeRouter>
      {/* The rest of your app goes here */}
    </NativeRouter>
  );
}
复制代码

Router

作为以上任意Router的基础,一般不直接导出使用,而是用封装更加具体的BrowserRouterHashRouter,或其他。

StaticRouter

通常用于node的服务端渲染,提供一个可操作的location参数

import * as React from "react";
import * as ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import http from "http";
​
function requestHandler(req, res) {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      {/* The rest of your app goes here */}
    </StaticRouter>
  );
​
  res.write(html);
  res.end();
}
​
http.createServer(requestHandler).listen(3000);
复制代码

结语

如果文章真的有帮到你,希望可以多多点赞、收藏、关注支持一波呀!!小阵会很开心哒~

文章如有错误或不严谨之处,还望指出,感谢感谢!!!

加油!

往期好文推荐「我不推荐下,大家可能就错过了史上最牛逼vscode插件集合啦!!!(嘎嘎~)😄」

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改