React Router中的组件

React Router中的组件主要分为三类：

import { BrowserRouter, Route, Link } from "react-router-dom";

• 路由器，像<BrowserRouter>和<HashRouter>
• 路线匹配器，例如<Route>和<Switch>
• 导航，喜欢<Link>，<NavLink>和<Redirect>

我们还喜欢将导航组件视为“路线更改者”。您应该从中导入Web应用程序中使用的所有组件react-router-dom。

路由器

每个React Router应用程序的核心应该是路由器组件。对于Web项目，react-router-dom提供和路由器。两者之间的主要区别在于它们存储URL和与Web服务器通信的方式。
A 使用常规的URL路径。这些通常是外观最好的URL，但是它们要求正确配置服务器。具体来说，您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。Create React App在开发中即开即用地支持此功能，并附带有关如何配置生产服务器的说明。
A 将当前位置存储在URL 的hash一部分中，因此URL看起来像http://example.com/#/your/page。由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置。

要使用路由器，只需确保将其呈现在元素层次结构的根目录下即可。通常，您会将顶级元素包装在路由器中，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

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

路线匹配器

有两个路由匹配组件：Switch和Route。当<Switch>被渲染，它会搜索其children <Route>内容找到一个其path当前的URL匹配。当找到一个对象时，它将渲染该对象，<Route>而忽略所有其他对象。这意味着您应将<Route>s的特定性更高（通常更长）放在不那么特定的paths 之前。如果没有<Route>匹配项，则<Switch>呈现器不呈现任何内容（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>
        {/* If the current URL is /about, this route is rendered
            while the rest are ignored */}
        <Route path="/about">
          <About />
        </Route>

        {/* Note how these two routes are ordered. The more specific
            path="/contact/:id" comes before path="/contact" so that
            route will render when viewing an individual contact */}
        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* If none of the previous routes render anything,
            this route acts as a fallback.

            Important: A route with path="/" will *always* match
            the URL because all URLs begin with a /. So that's
            why we put this one last of all */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

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

导航（或路线更改器）

React Router提供了一个<Link>在您的应用程序中创建链接的组件。无论您在何处呈现<Link>，<a>都会在HTML文档中呈现锚点（）。

<Link to="/">Home</Link>
// <a href="/">Home</a>

该<NavLink>是一种特殊类型的<Link>，当它是可以的风格自己是“主动” to的道具当前位置相匹配。

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

// When the URL is /react, this renders:
// <a href="/react" className="hurray">React</a>

// When it's something else:
// <a href="/react">React</a>

每当您要强制导航时，都可以呈现<Redirect>。当<Redirect>呈现，它将导航使用它的to道具。

<Redirect to="/login" />