react-router原理之Link跳轉

react-router原理之路徑匹配一文中講了react-router如何根據url進行路徑匹配進而完成不一樣的組件渲染。接下來繼續講一下如何改變url。仍舊以官網爲例，演示地址

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
	  ...
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);
複製代碼

能夠看出Link的做用就是接受點擊而後觸發url地址的變動，Link組件最終在瀏覽器中是以何種方式存在的呢？經過查看頁面的Element能夠看到Link最終會轉成<a>標籤，上面的例子中的Link在瀏覽器中的樣子是這樣的

<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/topics">Topics</a></li>
</ul>
複製代碼

既然最終Link被轉換成上面<a>標籤的形式，那麼和代碼裏直接寫a標籤有什麼區別呢？

最大的區別表象體如今是否有主文檔請求，<a>標籤必定會出現，而Link則是一般不出現（除非特殊的配置）

Link不僅是<a>標籤

Link在最後渲染的時候實際上是建立了<a>標籤，同時添加了一個onClick的監聽事件，onClick事件處理函數中作了兩件事：

• 若是Link上定義了onClick方法，則執行該方法
• 斷定是否應該阻止a標籤的默認跳轉
  • 若是阻止的話，則根據replace的props值決定執行history.push仍是執行history.replace。history包的地址是www.npmjs.com/package/his…，Link只負責觸發url變動，Route只負責根據url渲染組件，history的做用是執行url變動，並同時通知Route從新渲染。關於history(點擊這裏)[https://juejin.im/post/5b06b4e4f265da0ddc0c03a4]。
  • 若是不阻止的話，則其實與直接<a>標籤的寫法相似了，當點擊操做觸發時會產生主文檔的請求。

render() {
    ....
    return (
      <a {...props} onClick={this.handleClick} href={href} ref={innerRef} />
    );
  }
  
  handleClick = event => {
    if (this.props.onClick) this.props.onClick(event);

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      !this.props.target && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      const { history } = this.context.router;
      const { replace, to } = this.props;

      if (replace) {
        history.replace(to);
      } else {
        history.push(to);
      }
    }
  };
複製代碼

Link什麼狀況下阻止默認行爲

同時下列四個條件時就會阻止默認行爲

• Link的onClick回調中不包含event.preventDefault()代碼
• 點擊按鍵是左鍵
• Link的props未定義target
• 點擊操做觸發時沒有功能鍵（ctrl、shift等）被按下

!event.defaultPrevented &&  event.button === 0 && !this.props.target && !isModifiedEvent(event)
複製代碼

特殊的Link

react-router中除了Link還有一個NavLink，NavLink是一種特殊的Link，它的特殊體如今當與url匹配時生成的<a>標籤上會帶有一些樣式信息(經過activeClassName和activeStyle定義樣式)。

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
複製代碼

NavLink的特性須要作url的匹配查詢，以前在講路徑匹配的時候講到Route就是負責用來匹配路徑渲染組件的，所以這裏正適合引入Route來作匹配。匹配成功渲染帶樣式的Link，匹配失敗則渲染不帶樣式的Link。

Route定義路徑關聯組件的方式有三種：

• render
• component
• children

render與component方式定義的組件當不匹配時是不會渲染組件的

children方式則只是將匹配規則傳入進來，具體是否渲染由children本身定義。children的這個特性恰好符合知足NavLink的要求。

明白了NavLink的大致思路後能夠去看看源碼的具體實現。

NavLink具體實現

render() {
  return (
    <Route
      path={escapedPath}
      exact={exact}
      strict={strict}
      location={location}
      children={({ location, match }) => {
        const isActive = !!(getIsActive ? getIsActive(match, location) : match);

        return (
          <Link
            to={to}
            className={
              isActive
                ? [className, activeClassName].filter(i => i).join(" ")
                : className
            }
            style={isActive ? { ...style, ...activeStyle } : style}
            aria-current={(isActive && ariaCurrent) || null}
            {...rest}
          />
        );
      }}
    />
  );
}
複製代碼

進入下一篇react-router原理之幕後history