`<BrowserRouter>`

類型宣告

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

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

<BrowserRouter> 使用乾淨的 URL 在瀏覽器的網址列中儲存目前的位置，並使用瀏覽器內建的記錄堆疊進行導航。

import * as React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

const root = createRoot(document.getElementById("root"));

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

`basename`

設定應用程式在 URL 中的特定 basename 底下執行

function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /app/ */}
      </Routes>
    </BrowserRouter>
  );
}

`future`

一組選擇性的未來標誌可以啟用。我們建議盡早選擇已發佈的未來標誌，以利將來順利移轉到 v7。

function App() {
  return (
    <BrowserRouter future={{ v7_startTransition: true }}>
      <Routes>{/*...*/}</Routes>
    </BrowserRouter>
  );
}

`window`

BrowserRouter 預設使用目前的文件的 defaultView，但也可以用來追蹤其他視窗的 URL 變更，例如在 <iframe> 中。