react-router-dom
主要由三個類別的元件

• 路由器：,
• 路由匹配器：,
• 導航：,,
  也稱導航元件為路由改變元件。

每個React Router應用程式的核心都應該是一個路由元件（Route）。
對於一個web應用而言，主要由兩個路由元件,，兩者的主要區別在於他們儲存URL的方式以及於服務端通訊的方式不同。

他是最常規的URL路徑，需要配置於路由路徑一直的服務端，在react中支援開箱即用。

無狀態的路由。

將當前位置儲存在URL的雜湊部分，因此URL看起來像是：http://example.com/#/your/page
由於hash值永遠不會被傳遞到後端服務，因此，不需要特殊的伺服器配置。

路由匹配器

有兩個路由匹配器,

當使用時，他會搜尋它的子元素，以找到路徑於當前URL相匹配的元素，然後渲染它，同時會忽略掉其他的,這是因為這個特性，所以要求要將更具體的路徑（更長的）放在不太具體的路徑之前。
如果沒有找到對應的將會渲染null

注意：
將會始終匹配URL，因此，需要將放在的最後。另一種解決方案是使用精確的路徑

<div>
    <Switch>
        <Route path="/about">
            <About />
        </Route>

        <Route path="/contact/:id">
            <Contact />
        </Route>

        <Route path="/contact">
            <AllContacts />
        </Route>

        <Route path="/">
            <Home />
        </Route>
    </Switch>
</div>


ReactDOM.render(
    <Router>
        <App />
    </Router>
)
 

導骯

Home

## <NavLink>
<NavLink>是一個特殊的<Link>，當他的‘to’屬性匹配到當前位置時，它可以將自身設定為 ‘active’ 狀態。
```jsx
<NavLink to="/react" activeClassName="hurry">
    React
</NavLink>

//當URL時 /react 時，這個元件將會渲染：
<a href="/react" className="hurry">React</a>

//當URL時其他時，將會渲染：
<a href="/react">React</a>
 

在任何時候如果想使用強制導航，都可以使用，它將使用他的 ‘to’ 屬性進行導航。

<Redirect to="/login" />

API

useHistory

這個鉤子函式使您可以訪問可用於當行的歷史記錄例項。

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

useLocation

返回表示當前URL的位置物件。類似於useState，它在URL改變時返回一個新的位置。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location]);
}

function App() {
  usePageViews();
  return <Switch>...</Switch>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);

useParams

返回URL引數的鍵/值對物件，使用它來訪問當前的match.params

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

useRouteMatch

該鉤子函式嘗試以與相同的方式匹配當前URL。它對於在不實際渲染的情況下訪問匹配資料非常有用。

import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

//可以使用以下程式碼替換
import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

//或者

import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

這是一個使用H5的history API（pushState,replaceState,popstate事件）來使得UI與URL保持同步。
該元件包含以下5個屬性：

• basename: string
  有前導斜槓沒有結尾斜槓。
• getUserConfirmation: func
  確認導航，預設使用window.confirm
• forceRefresh: bool
  整個頁面強制重新整理。
• keyLength: number
  location.key 的長度，預設是6
• children: node
  渲染的子元素

<BrowserRouter 
    basename="/calendar"
    getUserConfirmation={(message, callback) => {
        // this is the default behavior
        const allowTransition = window.confirm(message);
        callback(allowTransition);
    }}
    forceRefresh={true}
    keyLength={12}
>
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

• basename: string
  有前導斜槓沒有結尾斜槓。
• getUserConfirmation: func
  確認導航，預設使用window.confirm
• hashType: string
  window.location.hash的字元編碼型別，可選值：
  + slash (default)
  例如：#/ 和 #/sunshine/lollio
  + noslash
  例如：# 和 #sunshine/lollio
  + hashbang
  例如：#!/ 和 #!/sunshine/lollio
• children: node

圍繞應用程式提供宣告性的可訪問導航

• to: string

• to: object

  • pathname
  • search
  • hash
  • state

• to: func

• replace: bool
  如果為true，則在點選連結時，將會替換歷史記錄堆疊中的當前條目，而不是新增新的條目。

• innerRef: func

• innerRef: RefObject

• components: React.Component
  如果想使用自己的導航元件，可以使用這個屬性。

• others

• className: string | func
• activeClassName: string
• style: object | func
  如果使用函式，連結狀態將作為引數傳遞。之後的版本中將會刪除該屬性，使用函式樣式代替內聯樣式。

      <NavLink
          to="/faq"
          style={isActive => ({
          color: isActive ? "green" : "blue"
          })}
      >
          FAQs
      </NavLink>
  

• activeStyle: object
  active狀態下顯示該屬性的樣式。

      <NavLink
          to="/faq"
          activeStyle={{
              fontWeight: "bold",
              color: "red"
      }}
      >
          FAQs
      </NavLink>
  

• exact: bool
  如果為true，則僅當loaction完全匹配時，才會應用active的樣式。

      <NavLink exact to="/faq">
          FAQs
      </NavLink>
  

• strict: bool

      <NavLink strict to="/faq">
          FAQs
      </NavLink>
  

• isActive: func

      <NavLink
          to="/events/123"
          isActive={(match, location) => {
              if (!match) {
              return false;
              }
              // only consider an event active if its event id is an odd number
              const eventID = parseInt(match.params.eventID);
              return !isNaN(eventID) && eventID % 2 === 1;
          }}
          >
          Event 123
      </NavLink>
  

• location: object
  isActive比較當前歷史位置（通常時當前瀏覽器URL）。要與不同的位置進行比較，可以傳遞一個位置
• aria-current: string

• to: string
• to: object
• push: bool
• from: string
• exact: bool
• strict: bool
• sensitive: bool

一個將URL的歷史記錄儲存在記憶體中（不讀取或寫入位址列）。在測試和非瀏覽器(如：React Native)環境中很有用.

• initialEntries: array
• initialIndex: number
• getUserConfirmation: func
• keyLength: number
• children: node