10分钟够你了解 react-router-dom

react-router-dom

引用 react-router 是一个基于 React 之上的强大路由库; 目前react-router最新版本已经到4.0+
这里只介绍 react-router-dom, 依赖于react-router

react-router 　　　　　　// React Router 核心
react-router-dom 　　　　// 用于 DOM 绑定的 React Router
react-router-native 　　// 用于 React Native 的 React Router
react-router-redux     // React Router 和 Redux 的集成
react-router-config    // 静态路由配置的小助手

API接口

BrowserRouter、HashRouter、MemoryRouter、Router、Redirect、Switch、
Route、matchPath、 Link、NavLink、withRouter、Prompt、StaticRouter

主要组件

BrowserRouter

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

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

basename: string
作用：为所有位置添加一个基准URL
应用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录

<BrowserRouter basename="/minooo" />
<Link to="/react" /> 　　// 最终渲染为 <a href="/minooo/react">

forceRefresh: bool
作用：路由器将在页面导航中使用整页刷新。
应用场景：使用此功能模拟传统服务器呈现的应用程序在页面导航之间进行完整页面刷新的方式。

<BrowserRouter forceRefresh={true} />

getUserConfirmation: func
作用：用来确认导航的功能；
应用场景：一些数据页面离开导航提示是否保存等。

<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

keyLength: number
作用：设置它里面路由的 location.key 的长度。默认是6。（key的作用：点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。）

<BrowserRouter keyLength={12} />

children: node
作用：渲染单一子元素。

HashRouter

**重要提示：**哈希历史记录不支持“location.key”或“location.state”;建议您将服务器配置为使用<BrowserHistory>来代替。

<HashRouter
  basename={optionalString}
  getUserConfirmation={optionalFunc}
  hashType={optionalString}
>
  <App />
</HashRouter>

参数：

• "slash" - 创建如 #/ 、 #/sunshine/lollipops
• "noslash" - 创建如 # 、 #sunshine/lollipops
• "hashbang" - 创建如 #!/ 、 #!/sunshine/lollipops

MemoryRouter

作用：将“URL”的历史记录保存在内存中（不读或写地址栏）。
应用场景：适用于测试和非浏览器环境

<MemoryRouter
  initialEntries={optionalArray}
  initialIndex={optionalNumber}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App />
</MemoryRou

### <Router>
所有路由器组件的通用低级接口。通常，应用程序将使用其中一个高级路由器：BrowserRouter、HashRouter
```jsx
import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  node
);

Switch

作用：只渲染出第一个与当前访问地址匹配的 若没有匹配则渲染

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
<Router>
    <Switch>
        <Route exact path="/" component={Hi}/>
        <Route strict path="/news/" render={News}/>
        <Route path="/home">{Home}</Route>
        <Route >{All}</Route>
    </Switch>
    <ul>
        <li><Link to="/">Hi</Link></li> // 若没Switch，则会渲染Hi、News、All
        <li><Link to="/news/">News</Link></li>
        <li><Link to="/home">Home</Link></li>
    </ul>
</Router>

tips：若上述没有使用 Switch，则会显示

Redirect

作用：呈现“重定向”将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。
应用场景：默认页面、404页面、强制登录、强制替换页面 重定向等。

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

属性
to: string
重定向的 URL 字符串

to: object
重定向的 location 对象

push: bool
若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。

from: string
需要匹配的将要被重定向路径。

Route

import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
    <Route exact path="/" component={Home}/>
    <Route strict path="/news/" render={News}/>
    <Route path="/home">{Home}</Route>
</Router>

的三种渲染方式 ：
tips:同一个中只使用一种渲染方式，多种会被覆盖，优先级为component>render>children。
　　// 只有当访问地址和路由匹配时，一个 React component 才会被渲染，此时此组件接受 route props (match, location, history)
　　　 // 此方法适用于内联渲染,不会引起意料之外的重新挂载
　　 // 不管地址匹配与否都会被调用，与render的工作方式基本一样

的三个属性：
path（string）: 　　// 路由匹配路径。（没有path属性的Route 总是会 匹配）
exact（bool）：　　 // 为true时，则要求路径与location.pathname必须完全匹配
strict（bool）：　　// 为true时，有结尾斜线的路径只能匹配有斜线的location.pathname

matchPath

与“”使用的匹配代码相同的匹配代码，除了在正常渲染周期之外，例如在服务器上渲染之前收集数据依赖项。

import { matchPath } from "react-router-dom";

const match = matchPath("/users/123", {
  path: "/users/:id",
  exact: true,
  strict: false
});

Link

作用：在应用程序周围提供声明性的、可访问的导航。

<Link to="/courses?sort=name" replace/>

参数
to: object
object属性 pathname、search、hash、state

<Link
  to={{
    pathname: "/courses", // 表示要链接到的路径的字符串。
    search: "?sort=name", // 查询参数的字符串表示形式。
    hash: "#the-hash", // 放在URL中的哈希
    state: { fromDashboard: true } // 保留到位置的状态
  }}
/>

to: function
函数式写法，当前位置作为参数传递给它，它应以字符串或对象的形式返回位置表示

<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />

replace: bool
当“true”时，单击链接将替换历史堆栈中的当前条目，而不是添加新条目。

<Link to="/courses" replace />

NavLink

Link 的一个特殊版本，当呈现的元素与当前URL匹配时，它将向其添加样式属性。

<NavLink to="/faq" 
    exact // 当'true'时，只有当位置完全匹配时，才会应用活动类/样式。
    strict // 当'true'时，在确定位置是否与当前URL匹配时，将考虑位置'pathname'上的尾随斜杠。
    activeClassName="selected" // 当元素处于活动状态时给它的类。默认的给定类是“active”。这将与“className”属性合并。
    activeStyle={{ fontWeight: "bold", color: "red" }} // 当元素处于活动状态时应用于该元素的样式。
    isActive={(match, location) => { // 添加额外逻辑以确定链接是否处于活动状态的函数。
        if (!match) {
          return false;
        }
    // 仅当事件id为奇数时才将其视为活动的事件
    const eventID = parseInt(match.params.eventID);
    return !isNaN(eventID) && eventID % 2 === 1;
  }}>
  FAQs
</NavLink>

参数：
exact: boolean
strict: boolean
activeClassName: string
activeStyle: object
isActive: func
如果不想验证链接的路径名是否与当前URL的“路径名”匹配，则应该使用此选项。

withRouter()

作用：显示当前位置路径名的简单组件

import React from "react";
import { withRouter } from "react-router";

function ShowTheLocation(props) {
    const { match, location, history } = props;
    console.log(match, location, history);
    // 打印出以下信息
    // {path: "/", url: "/", params: {}, isExact: false}
    // {pathname: "/home", search: "", hash: "", state: undefined, key: "j9o95u"}
    // {length: 50, action: "POP", location: {pathname: "/home", search: "", hash: "", state: undefined, key: "j9o95u"}, go: ƒ,goForward: ƒ, listen: ƒ,createHref: ƒ, push: ƒ, replace: ƒ, block: ƒ, }

    return(
        <div>You are now at {location.pathname}</div>
    )
}
// 创建一个“连接”（借用redux术语）到路由器的新组件。
const WithRouterCom = withRouter(ShowTheLocation);
export default WithRouterCom

Prompt

用于在离开页面导航之前提示用户

<Prompt
  message={location =>
    location.pathname.startsWith("/app")
      ? true
      : `Are you sure you want to go to ${location.pathname}?`
  }
/>

StaticRouter

从不改变位置的router
这在服务器端呈现场景中非常有用，因为用户实际上并没有点击，所以位置实际上不会改变。因此，其名称为：static。当您只需要插入一个位置并对呈现输出进行断言时，它在简单测试中也很有用。

import http from "http";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router";

http
  .createServer((req, res) => {
    // This context object contains the results of the render
    const context = {};

    const html = ReactDOMServer.renderToString(
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>
    );

    // context.url will contain the URL to redirect to if a <Redirect> was used
    if (context.url) {
      res.writeHead(302, {
        Location: context.url
      });
      res.end();
    } else {
      res.write(html);
      res.end();
    }
  })
  .listen(3000);