react-router-dom 中文文档

HOOKS

React Router附带了一些HOOK，可让您访问路由器的状态并从组件内部执行导航

• useHistory
• useLocation
• useParams
• useRouteMatch

useHistory

useHistory 钩子返回 history 对象，可以使用 useHistory 进行导航

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

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

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

  return (
    
      Go home
    
  );
}

useLocation

useLocation 钩子返回当前URL的 location 对象。可以把它想象成一个useState，每当URL发生变化时，它都会返回一个新的位置。
这是非常有用的，例如，当一个新的页面加载时，比如使用web分析工具触发一个新的“页面视图”事件，如下面的例子所示:

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

useParams 动态参数列表的引用对象，用于获取中的 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

useRouteMatch 尝试以与相同的方式匹配当前URL。它主要用于访问匹配数据，而无需实际渲染

Now, instead of

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

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

you can just

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

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return 
;
}

useRouteMatch 钩子也可以:

• 不接受任何参数并返回当前
• 接受单个参数，与matchPath的props参数相同。它可以是一个字符串形式的路径名(就像上面的例子)，也可以是一个带有匹配道具的对象，像这样:

const match = useRouteMatch({
  path: "/BLOG/:slug/",
  strict: true,
  sensitive: true
});

Router使用HTML5 History API（(pushState, replaceState and the popstate event）来保证 UI 组件和 URL 同步

basename
基准URL，如果你的应用程序是从服务器上的子目录中提供的，你需要将其设置为子目录。一个正确格式化的basename应该有一个开头斜杠，但没有结尾斜杠。

     // renders 
     // renders 
    ...

getUserConfirmation
用于确认路由跳转的函数。默认使用window.confirm

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

forceRefresh
如果值为 true 路由跳转将会刷新整个页面。可以使用它来模拟传统服务器渲染应用程序，路由跳转之间刷新页面的工作方式

keyLength
location.key的长度。默认为6。

children
要渲染的子元素。
Note: 如果React < 16，必须使用单个子元素，因为render方法不能返回多个元素。如果您需要多个元素，则可以尝试将它们包装在extra中

使用 Hash 模式路由(i.e. window.location.hash)来保证 UI 组件和 URL 同步
重要说明:Hash模式不支持location.key或location.state。在以前的版本中，我们尝试对行为进行兼容处理，但存在无法解决的极端情况。任何需要此行为的代码或插件都将无法工作。由于此技术仅旨在支持旧版浏览器，因此我们建议您配置服务器以供使用。

basename
基准URL，如果你的应用程序是从服务器上的子目录中提供的，你需要将其设置为子目录。一个正确格式化的basename应该有一个开头斜杠，但没有结尾斜杠。

 // renders 

getUserConfirmation
用于确认路由跳转的函数。默认使用window.confirm

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

hashType
window.location.hash 的编码类型。可用值:

• "slash" - 类似 #/ 或 #/sunshine/lollipops
• "noslash" - 类似 # 或 #sunshine/lollipops
• "hashbang" - 创建 “ajax crawlable”Hash (Google弃用) 类似 #!/ 或 #!/sunshine/lollipops
  默认为"slash"。
  children
  渲染单个子元素

提供声明式、可访问的导航。

About

to
链接路径的字符串形式，由路由路径、搜索参数和 Hash 属性构成

to