react-router-dom
主要由三个类别的组件

• 路由器：,
• 路由匹配器：,
• 导航：,,
  也称导航组件为路由改变组件。

每个React Router应用程序的核心都应该是一个路由组件（Route）。
对于一个web应用而言，主要由两个路由组件,，两者的主要区别在于他们存储URL的方式以及于服务端通信的方式不同。

他是最常规的URL路径，需要配置于路由路径一直的服务端，在react中支持开箱即用。

无状态的路由。

将当前位置存储在URL的哈希部分，因此URL看起来像是：http://example.com/#/your/page
由于hash值永远不会被传递到后端服务，因此，不需要特殊的服务器配置。

路由匹配器

有两个路由匹配器,

当使用时，他会搜索它的子元素，以找到路径于当前URL相匹配的元素，然后渲染它，同时会忽略掉其他的,这是因为这个特性，所以要求要将更具体的路径（更长的）放在不太具体的路径之前。
如果没有找到对应的将会渲染null

注意：
将会始终匹配URL，因此，需要将放在的最后。另一种解决方案是使用精确的路径

    
        
            
        

        
            
        

        
            
        

        
            
        
    



ReactDOM.render(
    
        
    
)

导肮

## 
是一个特殊的，当他的‘to’属性匹配到当前位置时，它可以将自身设置为 ‘active’ 状态。
```jsx

    React


//当URL时 /react 时，这个组件将会渲染：
React

//当URL时其他时，将会渲染：
React

在任何时候如果想使用强制导航，都可以使用，它将使用他的 ‘to’ 属性进行导航。

API

useHistory

这个钩子函数使您可以访问可用于当行的历史记录实例。

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

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

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

  return (
    
      Go home
    
  );
}

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 ...;
}

ReactDOM.render(
  
    
  ,
  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 
Now showing post {slug}
;
}

ReactDOM.render(
  
    
      
        
      
      
        
      
    
  ,
  node
);

useRouteMatch

该钩子函数尝试以与相同的方式匹配当前URL。它对于在不实际渲染的情况下访问匹配数据非常有用。

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

function BlogPost() {
  return (
     {
        // Do whatever you want with the match...
        return 
;
      }}
    />
  );
}

//可以使用以下代码替换
import { Route } from "react-router-dom";

function BlogPost() {
  return (
     {
        // Do whatever you want with the match...
        return 
;
      }}
    />
  );
}

//或者

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

function BlogPost() {
  return (
     {
        // Do whatever you want with the match...
        return 
;
      }}
    />
  );
}

这是一个使用H5的history API（pushState,replaceState,popstate事件）来使得UI与URL保持同步。
该组件包含以下5个属性：

• basename: string
  有前导斜杠没有结尾斜杠。
• getUserConfirmation: func
  确认导航，默认使用window.confirm
• forceRefresh: bool
  整个页面强制刷新。
• keyLength: number
  location.key 的长度，默认是6
• children: node
  渲染的子元素

 {
        // this is the default behavior
        const allowTransition = window.confirm(message);
        callback(allowTransition);
    }}
    forceRefresh={true}
    keyLength={12}
>
     // renders 
     // renders 
    ...