likes
comments
collection
share

React Router 6：Router篇

作者站长头像
站长
· 阅读数 40

前言

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

开开心心学技术大法~~

React Router 6：Router篇

来了来了，他真的来了~

正文

React18用上了，React Router6你用上了吗？

react-router组成

router有三部分

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

其中react-router是react-router-dom和react-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只关注url与ui相匹配

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

    • 为了配合这些注入的data信息，还额外暴露了一些处理api
    • 如loader，action，fetchers等

注意：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不像之前的BrowserHistory和HashHistory，他不需要跟浏览器做交互，当然也没有浏览器的历史堆栈，而是将路由信息已数组的形式维护在内存中

所以通常用于没有浏览器界面的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的基础，一般不直接导出使用，而是用封装更加具体的BrowserRouter或HashRouter，或其他。

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);

结语

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

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

React Router 6：Router篇

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

转载自:https://juejin.cn/post/7127645586584502302
评论
请登录