React-Router API 參考

<Link>

// 默認會被渲染成一個 `<a>` 標籤
<Link to="/about">About</Link>

類似Vue Router<router-link to="/about">about</router-link>

<Link> 組件支持用戶在具有路由功能的應用中 (點擊) 導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標籤，比起寫死的 <a href="..."> 會好一些，理由如下：

1、無論是 HTML5 history 模式還是 hash 模式，它的表現行爲一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。
2、在 HTML5 history 模式下，Link 會守衛點擊事件，讓瀏覽器不再重新加載頁面。

to
類型: string | Location

pathname：表示鏈接到的路徑的字符串。
search：查詢參數的字符串。
hash：要輸入網址的哈希，例如 ＃a-hash。
state：location預設的狀態。

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

這些屬性在路由組件中可以通過props.location屬性獲取。

<NavLink>

<Link>的特殊版本，當它與當前URL匹配時，它將爲呈現的元素添加樣式屬性。

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

路由激活時高亮的效果

<Redirect>

渲染<Redirect>將導航到新位置。 新位置將覆蓋歷史記錄堆棧中的當前位置，就像服務器端重定向（HTTP 3xx）一樣。

參數和Link組件類似。

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

通常用於驗證登錄。

<Route>

它的最基本職責是在其路徑與當前URL匹配時呈現一些UI。渲染路徑匹配到的視圖組件。

Route 渲染的方法

<Route component>
<Route render>
<Route children> function

建議使用<Route>渲染某些內容的方法是使用子元素，但是，還有一些其他方法可用於使用<Route>渲染內容。 提供這些主要是爲了支持在引入鉤子之前使用早期版本的路由構建的應用程序。

三種渲染方渲染出來的組件都一樣，都有三個屬性

match
location
history

使用component進行渲染組件

<Route path="/child" component={Child}></Route>

當您使用component時，路由會使用React.createElement從給定的組件中創建一個新的React元素。 這意味着，如果您向組件prop提供內聯函數，則將在每個渲染中創建一個新組件。

// 這樣寫component={() => (<div>Child</div>)}無法複用之前的DOM了
<Route path="/child" component={() => (<div>Child</div>)}></Route>

這將導致現有組件的卸載和新組件的安裝，而不僅僅是更新現有組件。 使用內聯函數進行內聯渲染時，請使用render或children屬性（如下）。

render: func

<Route path="/child" render={() => (<div>Child</div>)}></Route>

這樣可以方便地進行內聯渲染和包裝，而無需進行上述不必要的重新安裝。

// 用於創建受保護的路由
const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

警告：<Route component>優先於 <Route render>，因此請勿在同一<Route>中同時使用兩者。

children: func

children prop 與 render 類似，但是，無論路徑與位置是否匹配，都會渲染子級。

function ListItemLink ({to, ...rest}) {
  return (
    <Route path={to} children={({match}) => {
      console.log(match)
      return (
        <li className={match ? 'active': ''}>
          <Link to={to} {...rest} >{to}</Link>
        </li>
      )
    }}>

    </Route>
  )
}

上面實現的功能是路由菜單的選中效果，默認兩個都會顯示，如果把children換成render則只會顯示匹配路徑的那個。

根據具體的功能進行選中，現在你已經知道了他們之間的區別，默認通常使用 children elements 這種寫法,

<Route path="/child">
  <Child />
</Route>

您可以通過withRouter高階組件訪問location對象的屬性和最接近的<Route>匹配項。

function About(props) {
  console.log(props, '這個是路由組件')
  const handleClick = () => {
    props.history.push('/')
  }
  return (
    <div>
      About
      <button onClick={handleClick}>跳轉首頁</button>
    </div>
  )
}
const AboutWithRouter = withRouter(About);

<Route path="/about">
  <AboutWithRouter />
</Route>
// 等同於 <Route path="/about" component={About}></Route>