解读React Router V6官方文档(二)路由

汤包一口吞
231 阅读2分钟

BrowserRouter

类型声明

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  window?: Window;
}

官方推荐BrowserRouter作为React Router在web浏览器中的运行路由。它在浏览器地址栏中使用简洁的URL存储着当前的location信息，并用内置的history栈导航。

<BrowserRouter window>

默认使用当前document.defaultView。

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

HashRouter

有时候出于某些考虑，URL不能发给服务端，这时候需要用HashRouter,比如在一些共享主机的情况，对服务端没有完整的控制权限。在这个情景下，HashRouter允许用hash码存储当前location信息。

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

官网不建议使用HashRouter。

HistoryRouter

<unstable_HistoryRouter>

将history的实例当做了props，可以在无React环境使用该实例，或者将其作为一个全局变量。

import React from 'react'
import ReartDOM 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>
)

这个Api带有一个unstable_的前缀，因为你可能会无意识的在项目中添加两个版本的history库，因为不管React Router用的哪个版本，你都必须把一个库添加到package.json。官方并不推荐将history作为直接依赖添加，而是推荐用react-router的内置版本。等官网有了新的机制去检查不匹配的版本，就会去除unstable_前缀。

MemoryRouter

MemoryRouter用数组的方式存储其location信息。和BrowserHistory和HashHistory不同，它不和外部源绑定，如BrowserHistory和HashHistory都和浏览器的history栈有关。这使得它能解决一些特殊场景：在测试中，你可以完全控制history栈，因为它是在内存中控制history

  •   <MemoryRouter initialEntries>：默认location为['/']

  •   <MemoryRouter initialIndex>:默认指向initialEntries最后一个index

Tip:

大多数React Router测试都是用MemoryRouter，如React Router源码中的一些测试例子就是用的MemoryRouter

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

NativeRouter推荐用在React Native app中

  •   <NativeRouter initialEntries>：初始入口默认为['/']

  •   <NativeRouter initialIndex>：默认指向初始入口最后一个index

    import * as React from "react"; import { NativeRouter } from "react-router-native";

    function App() { return ( {/* The rest of your app goes here */} ); }

Router

Router是被所有router组件（像和）共享的低阶接口。在React中，Router是一个context provider，为app各个部分提供路由信息。

你不需要手动渲染一个Route>,相反，你需要根据环境使用高阶路由。

<Router basename>

属性可用于所有的routes和links，它们的Url的pathname都相对与这个‘base’定位。当渲染一个大型app或者app有多个入口点的时候，这个属性很有用。

StaticRouter

StaticRouter用于在node中渲染React Router app

通过location属性提供当前位置信息。

  •   <StaticRouter location>默认为'/
avatar
文章
阅读
粉丝