5 分钟内了解 React Router—

原文：Learn React Router in 5 Minutes - A Beginner's Tutorial，作者：Bob Ziroll

有时你只有 5 分钟的时间，与其把时间浪费在社交媒体上，不如让我们在 5 分钟内了解一下 React-Router！在本教程中，我们将通过为 Scrimba 针织店网站创建导航来学习 React 中的路由基础知识。

如果你需要对这一主题进行了解，你可以加入我即将开设的 React 高级课程的等待名单，或者如果你还是个初学者，可以看看我的 React 入门课程。

React-Router 到底是什么？

许多现代网站实际上是由一个页面组成的，它们只是看起来像多个页面，因为它们包含像独立页面一样渲染的组件。这些通常被称为 SPA--单页应用程序。在其核心部分，React Router 所做的是根据 URL 中使用的路由（/ 代表主页，/about 代表关于页面，等等），有条件地渲染某些组件来显示。

例如，我们可以使用 React Router 将 www.knit-with-scrimba.com/ 连接到 www.knit-with-scrimba.com/about or www.knit-with-scrimba.com/shop。

听起来很好 - 我如何使用它？

要使用 React Router，你首先要用 NPM 安装它。

npm install react-router-dom

另外，你也可以直接使用 Scrimba 中的这个项目，它的代码已经写好了。

你需要从 react-router-dom 包中导入 BrowserRouter、Route 和 Switch。

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

在我的例子中，我将登陆页面与另外两个“页面”（实际上只是组件）连接起来，它们是 Shop 和 About。

首先，你需要设置你的应用程序与 React Router 一起工作。所有被渲染的东西都需要放在 <BrowserRouter> 元素里面，所以先把你的 App 包在这些元素里面。这个组件设置显示所有你提供给它的各种组件的逻辑。

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

接下来，在你的 App 组件中，添加 Switch 元素（开放和关闭标签）。这些确保一次只渲染一个组件。如果我们不使用这个，我们可以默认为 Error 组件，我们将在后面提到。

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

现在是时候添加你的 <Route> 标签了。这些是组件之间的链接，应该放在 <Switch> 标签内。

要告诉 <Route> 标签要加载哪个组件，只需添加一个 path 属性和你想用 component 属性加载的组件名称。

<Route path='/' component={Home} />

许多主页的 URL 是网站名称后面加一个 "/"，例如，www.knit-with-scrimba.com/。在这种情况下，我们在 Route 标签中加入 exact。这是因为其他的 URL 也包含 “/”，所以如果我们不告诉应用程序它只需要寻找 /，它就会加载第一个与路由匹配的 URL，我们就会遇到一个相当棘手的 bug。

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

现在将组件导入到应用程序中。你可能希望把它们放在一个单独的 “components” 文件夹中，以保持代码的清晰和可读性。

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';

关于我前面提到的错误信息，如果用户输入了错误的 URL，就会加载。这就像一个普通的 <Route> 标签，但没有路径。错误组件包含 <h1>Oops! Page not found!</h1>。不要忘记把它导入到应用程序中。

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

到目前为止，我们的网站只能通过输入 URL 进行导航。为了给网站添加可点击的链接，我们使用 React Router 的 Link 元素，并设置了一个新的 Navbar 组件。再提醒一次，别忘了把新组件导入到应用程序中。

现在为应用程序中的每个组件添加一个 Link，并使用 to="URL" 来链接它们。

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

你的网站现在有了可点击的链接，你的单页应用程序可以导航了。

小结

如果你想在 React 应用程序中轻松导航，忘记锚标签，添加 React Router。它很清晰，很有条理，而且它使添加和删除页面变得更加容易。

祝你编程愉快！