React-Router 中的 Router

热度 ℃

Router 是所有路由组件共用的底层接口，一般我们并不会使用这个接口，而是使用高级的路由：

  • BrowserRouter
  • HashRouter
  • MemoryRouter
  • NativeRouter
  • StaticRouter

最常见的使用底层的 <Router> 的情形就是用来与 Redux 或者 Mobx 之类的状态管理库的定制的 history 保持同步。

注意:并不是说使用状态管理库就必须使用 <Router>，它仅用作于深度集成。

Router 有两个重要的属性:

  • history : 用来导航的 history 对象;
  • children : 需要渲染的单一组件，即 Router 下面只有一个子元素，可以是 Component，也可以是一个 html 元素;

BrowserRouter

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

1
2
3
4
5
6
7
8
9
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber} >
  <App />
</BrowserRouter>

BrowserRouter 有几个重要的属性。

basename: string

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

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

getUserConfirmation: func

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

1
2
3
4
5
6
7
// 使用默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}
<BrowserRouter getUserConfirmation={getConfirmation} />

forceRefresh: bool

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

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

keyLength: number

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

HashRouter

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

注意： 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 BrowserHistory 代替。

HashRouter 同样也有 basename getUserConfirmation 等属性。

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

hashType: string

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

  • “slash“ - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops
  • “noslash“ - 后面没有斜杠，例如 # 和 #sunshine/lollipops
  • “hashbang“ - Google 风格的 “ajax crawlable”，例如 #!/ 和 #!/sunshine/lollipops

hashType 默认值为 “slash”。

MemoryRouter

MemoryRouter

StaticRouter

StaticRouter