react-router4.0学习笔记

react-router4.0

1.

使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

1.basename: string

当前位置的基准 URL。如果你的页面部署在服务器的二级（子）目录，你需要将 basename 设置到此子目录。 正确的 URL 格式是前面有一个前导斜杠，但不能有尾部斜杠。

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // 渲染为 <a href="/calendar/today">

2.getUserConfirmation: func

当导航需要确认时执行的函数。默认使用 window.confirm。

// 使用默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

3.forceRefresh: bool

当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

4.keyLength: number

location.key 的长度。默认是 6。

<BrowserRouter keyLength={12}/>

5.children: node

渲染单一子组件（元素）。

2.

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

HashRouter 是一种特定的 ， HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

注意： 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 代替。

1.basename: string

<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">

当前位置的基准 URL。正确的 URL 格式是前面有一个前导斜杠，但不能有尾部斜杠。

2.getUserConfirmation: func

// 使用默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<HashRouter getUserConfirmation={getConfirmation}/>

当导航需要确认时执行的函数。默认使用 window.confirm。

3.hashType: string

window.location.hash 使用的 hash 类型。有如下几种：

“slash” - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops

“noslash” - 后面没有斜杠，例如 # 和 #sunshine/lollipops

“hashbang” - Google 风格的 “ajax crawlable”，例如 #!/ 和 #!/sunshine/lollipops

默认为 “slash”。

4.children: node

渲染单一子组件（元素）。

3.

import { Link } from 'react-router-dom'

<Link to="/about">关于</Link>

为您的应用提供声明式的、无障碍导航。

to: string
需要跳转到的路径(pathname)或地址（location）。

<Link to="/courses"/>

to: object
需要跳转到的地址（location）。

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

replace: bool
当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false。

<Link to="/courses" replace />

4.

import { NavLink } from 'react-router-dom'

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

当它与当前的URL匹配时，它将为呈现的元素添加样式属性。

1.activeClassName: string

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

当前路由显示的类名,默认为active

2.activeStyle: object

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

当前路由显示的样式.

3.exact: bool

exactly.<NavLink
  exact
  to="/profile"
>Profile</NavLink>

为true，则只有在匹配的位置匹配时才会应用活动的类/样式。

4.strict: bool

<NavLink
  strict
  to="/events/"
>Events</NavLink>

为true,路径名末尾被加上斜杠

5.isActive: func

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

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

接收一个函数.判断是否是当前路由,可以通过判断第一个match参数.和做一些逻辑处理!

5.

import { Prompt } from 'react-router'

<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

离开路由之前做一些提示?

1.message:String

<Prompt message="Are you sure you want to leave?"/>

离开路由之前返回一个字符串来提示

2.message:func

离开路由之前返回一个字符串来提示,或者true允许跳转

3.when : bool

当when为true时,允许它拦截 .

6.

import { Route, Redirect } from 'react-router'

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

页面重定向.覆盖历史记录.类似http 3xx重定向!

1.to: string

<Redirect to="/somewhere/else"/>

重定向的Url

2.to: Object

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

重定向配置

3.push: bool

<Redirect push to="/somewhere/else"/>

当true,Push一条新的历史记录,而不是覆盖!

4.from :string

<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

重定向前的url!

7. *

路由对应的ui组件!!!

1.methods(match,location,history)

1.

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>
If the location of the app is / then the UI hierarchy will be something like:<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>
And if the location of the app is /news then the UI hierarchy will be:<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

2.

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

3.

<ul>
  <ListItemLink to="/somewhere"/>
  <ListItemLink to="/somewhere-else"/>
</ul>

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

<Route children={({ match, ...rest }) => (
  {/* Animate will always render, so you can use lifecycles
      to animate its child in and out */}
  <Animate>
    {match && <Something {...rest}/>}
  </Animate>
)}/>

2.path:string

<Route path="/users/:id" component={User}/>

路径名称,没填路径时则总是匹配!

3.exact: bool

<Route exact path="/one" component={About}/>

while true,当路径与位置匹配时,才会显示.

4.strict: bool

<Route strict path="/one/" component={About}/>

while true,有斜杠的路径只匹配一个位置.

8.

只匹配第一个正确的路径

import { Switch, Route } from 'react-router'

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