React Router 入门指南

有时你只有 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/。在这种情况下，我们把 exact 添加到 Route 标签。这是因为其他 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>
    )
}

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

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。它很干净，有条理，并且使添加和删除页面变得更加容易。

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