react-route4.0学习笔记

React-router Demo

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

React-router-dom常用组件API

• BrowserRouter

• HashRouter

• Route: exect, path, component

• Switch

• Link: to, from

• Redirect

BrowserRouter

浏览器的History API

• pushState

• replaceState

浏览器可以监听popstate来监听路由的变化

BrowserRouter 和 HashRouter的区别

• BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。

• BrowserRouter的路径中没有#，HashRouter的路径包含#。

• BrowserRouter没有任何影响，因为state保存在history对象中，HashRouter刷新后会导致路由state参数的丢失。

• BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信，而HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。

参考文章

react-router官方文档