RouterProvider

<BrowserRouter>

import React from "react"
import { createBoot } from "react-dom/client"
import { BrowserRouter } from "react-router"

const root = createBoot(document.getElement("root"))

root.render(
    <BrowserRouter>
        {/* The rest of your app goes here */}
    </BrowserRouter/>
)

<HashRouter>

import React from "react"
import { createBoot } from "react-dom/client"
import { HashRouter } from "react-router"

const root = createBoot(document.getElement("root"))

root.render(
    <HashRouter>
        {/* The rest of your app goes here */}
    </HashRouter/>
)

Hashrouter 除非绝对必要，否则不建议使用

<MemoryRouter>

import React from "react"
import { create } from "react-test-renderer"
import { Memoryrouter, Routes, Route } from "react-router-dom"

describe("My app", () => {
    it("renders correctly", () => {
        let render = create(
            <MemoryRouter initialEntries={["/users/mjackson"]}>
                <Routes>
                    <Route path="users" element={<Users/>}>
                        <Route path=":id" element={<UserProfile/>} />
                    </Route>
                </Routes>
            </Memoryrouter>
        )
    })
})

<NativeRouter>

import React from "react"
import { NativeRouter } from "react-router-native"

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

<Router>

<Router>是所有路由器组件共享的低级接口。在React中，<Router>是一个上下文提供程序，为应用程序的其余部分提供路由信息。