react-淺析react-router4

在react-router4中，除了在路由文件中還能夠在頁面中寫路由組件

dva初始化項目中router.js文件的內容以下

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

頁面中的路由：

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

class Products extends React.Component {
  render() {
     return （
        <div>
           <Switch>
              <Route path="/" component={IndexPage} />
           </Switch>
        </div>
     ）
  }
}

1、引用react-router-dom

react-router-dom是用於DOM綁定的 React Router, 比react-router多出了<Link><BrowserRouter>這樣的DOM類組件

import { Router, Route, Switch, Redirect } from 'react-router-dom';

2、組件-<Router>

// 用於導航的歷史對象
<Router history={history}></Router>

// 一個使用了 HTML5 history API 的高階路由組件，保證你的 UI 界面和 URL 保持同步
<BrowserRouter
    basename="/minooo" // 添加一個基準URL
    forceRefresh={false} // 當瀏覽器不支持 HTML5 的 history API 時強制刷新頁面
    getUserConfirmation={getConfirmation()} // 導航到此頁面前執行的函數
    keyLength={12} // 設置它裏面路由的 location.key 的長度。默認是6
></BrowserRouter>

<HashRouter></HashRouter>
// Hash history 不支持 location.key 和 location.state。
// 另外因爲該技術只是用來支持舊版瀏覽器，所以更推薦你們使用 BrowserRouter

3、組件-<Switch>

若是你訪問 /about，那麼組件 About User Nomatch 都將被渲染出來，由於他們對應的路由與訪問的地址 /about 匹配

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

<Switch>只渲染出第一個與當前訪問地址匹配的 <Route> 或 <Redirect>

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

4、組件-<Route>

<Route
 path="/" // url路徑
 exact  // bool 嚴格匹配 ’/link’與’/’是不匹配的，可是在false的狀況下它們是匹配的
 component={IndexPage} // 渲染的組件
/>

<Route
 path="/" // url路徑
 exact  // bool 嚴格匹配 ’/link’與’/’是不匹配的，可是在false的狀況下它們是匹配的
 render={() => <div>Home</div>} // 內聯渲染
/>

5、組件-<Redirect>

// 經過from匹配路由重定向
<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>

// 經過render重定向
<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

6、組件-<Link>

// to爲string
<Link to='/courses?sort=name'/>

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

// replace
<Link to="/courses" replace />
// replace(bool)：爲 true 時，點擊連接後將使用新地址替換掉訪問歷史記錄裏面的原地址；
// 爲 false 時，點擊連接後將在原有訪問歷史記錄的基礎上添加一個新的紀錄。默認爲 false；

7、組件-<NavLink>

<NavLink to="/about" exact>About</NavLink>

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

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

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

8、對象-history

history 對象一般具備如下屬性和方法：

• length: number 瀏覽歷史堆棧中的條目數
• action: string 路由跳轉到當前頁面執行的動做，分爲 PUSH, REPLACE, POP

• location: object 當前訪問地址信息組成的對象，具備以下屬性：

  pathname: string URL路徑
   search: string URL中的查詢字符串
   hash: string URL的 hash 片斷
   state: string 例如執行 push(path, state) 操做時，location 的 state
          將被提供到堆棧信息裏，state 只有在 browser 和 memory history 有效。

• push(path, [state]) 在歷史堆棧信息里加入一個新條目。
• replace(path, [state]) 在歷史堆棧信息裏替換掉當前的條目
• go(n) 將 history 堆棧中的指針向前移動 n。
• goBack() 等同於 go(-1)
• goForward 等同於 go(1)
• block(prompt) 阻止跳轉

9、對象-location

location 是指你當前的位置，將要去的位置，或是以前所在的位置

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

在如下情境中能夠獲取 location 對象

• 在 Route component 中，以 this.props.location 獲取
• 在 Route render 中，以 ({location}) => () 方式獲取
• 在 Route children 中，以 ({location}) => () 方式獲取
• 在 withRouter 中，以 this.props.location 的方式獲取

能夠在不一樣情境中使用 location：

<Link to={location} />
<NaviveLink to={location} />
<Redirect to={location />
history.push(location)
history.replace(location)

10、對象-match

const Topics = ({ match }) => (
  <div>
    <Link to={`${match.url}/rendering`}>Rendering with React</Link>
    <Route path={`${match.url}/:topicId`} component={Topic} />
  </div>
);

match 對象包含了 <Route path> 如何與 URL 匹配的信息，具備如下屬性：

• params: object 路徑參數，經過解析 URL 中的動態部分得到鍵值對
• isExact: bool 爲 true 時，整個 URL 都須要匹配
• path: string 用來匹配的路徑模式，用於建立嵌套的 <Route>
• url: string URL 匹配的部分，用於嵌套的 <Link>

在如下情境中能夠獲取 match 對象

• 在 Route component 中，以 this.props.match獲取
• 在 Route render 中，以 ({match}) => () 方式獲取
• 在 Route children 中，以 ({match}) => () 方式獲取uter 中，以 this.props.match的方式獲取matchPath 的返回值

當一個 Route 沒有 path 時，它會匹配一切路徑。
具體實例可參考 https://reacttraining.com/rea...