react-router学习-高质量翻译精炼版

1. 主要组件简介

• 路由器 router，like < BrowserRouter>和< HashRouter>
• 路径匹配器 route matchers，like < Route> and < Switch>
• 导航 navigation，like < Link>, < NavLink>, and < Redirect>

1.1 路由器 Router

• < BrowserRouter>
• < HashRouter>

对于每一个Web项目，react-router-dom提供了 < BrowserRouter> 和 < HashRouter> 两种router。他们主要的区别是他们存储URL的方式和与Web服务器交流的方式有所不同。

• < BrowserRouter>使用常规的URL路径。是外观最好的URL，但是它们要求正确配置服务器。具体来说，您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。Create React App在开发中即开即用地支持此功能，并附带有关如何配置生产服务器的说明。
• < HashRouter>将当前位置存储在URL 的hash一部分中，因此URL看起来像http://example.com/#/your/page。由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置。

使用Router，要确保它被渲染在你要渲染的元素等级的根上。通常，你要把它包裹在你的顶级元素< App />上。

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

1.2 路径匹配器 Route

• < Switch>
• < Route>
  和路径匹配相关的组件有两个：Switch和Route。当< Switch>被渲染，它会搜索它的子< Route>，找到第一个path与当前URL匹配的Route。当找到时，它将渲染这个Route并忽略其他Route。这意味着您需要手动调整Route们在代码中的位置，以确保在无优先级的情况下，哪一个Route应该被渲染。

如果Switch没有找到Route可以匹配，它将渲染出null对象。

例子

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

function App() {
  return (
    <div>
      <Switch>
        {/* 若当前路径是 /about, 这个route将被渲染
            剩下的会被忽略 */}
        <Route path="/about">
          <About />
        </Route>

        {/* 注意接下来的两条Route的顺序. 这条更加特别的
            path="/contact/:id"放在了path="/contact"的前面 */}
        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* 如果先前的Route都没有匹配上，那么会渲染下面的Route，
        	因为"/"可以匹配任何路由 */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

1.2.1 注意事项

1. 一个非常重要的事是，Route的path属性并不是全局匹配，而是从字符串的开始匹配，比如path="/“永远可以匹配到任何路径，因此，我们通常将< Route path=”/" />放到Switch的最后。一种解决方案是使用< Route exact path="/">
2. 虽然Router不支持渲染Switch外的Route，但在5.1版本，我们推荐你使用the useRouteMatch hook替代。另外我们不建议你渲染没有path属性的Route，作为替代，建议你使用a hook去访问任何你想要的变量。

1.3 导航 Navigation (or Route Changers)

• < Link />
• < NavLink />
• < Redirect />

React Router提供< Link>组件，它永远会被渲染成一个a标签。

< NavLink />是一个特殊的Link类型，当to属性与当前路径匹配，它可以改变自己的激活样式。

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

任何时候，只要你想暴力跳转，你可以使用< Redirect />。