开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情

让我们谈谈框架

塑造这种复杂的网络开发语言的一种方法是通过框架。一个编程框架是：

“......一种抽象，其中软件......可以通过额外的用户编写的代码有选择地改变，从而提供特定于应用程序的软件。它提供了一种构建和部署应用程序的标准方法，并且是一个通用的，可重用的软件环境提供特定功能作为更大软件平台的一部分，以促进软件应用程序、产品和解决方案的开发。”¹

很酷，对吧？

框架提供了大量额外的效率和功能，这对于普通（普通）代码来说是一个遥远的幻想。确实，一旦您对框架下的底层语言和逻辑有了扎实的了解，框架就是合乎逻辑的下一步。这就引出了我们这篇文章的主题：React框架，更具体地说……

React Router

React Router 是一个功能非常强大的工具，它允许 React 网络应用程序实现客户端路由的目标，它显示了一个基于该应用程序中的内容和组件的动态网站层次结构。通过 React Router，Web 开发人员能够：

• 轻松创建组织良好的域扩展层次结构
• 消除在该域内的页面之间导航时对新服务器请求的需要
• 通常提高用户体验的速度和清晰度

是时候分解它了……

Routers

如果您正在设置React Router以便在您的 Web 应用程序中使用，您需要首先以 或 的形式导入路由器组件本身。有关它们之间差异的更多信息，请参见此处。

接下来，您需要在“元素层次结构的根部”这个路由器组件中 “包装您的顶级 组件” ²。这应该发生在你的index.js文件中，它应该看起来像这样：****

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom"
import './index.css'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

注意：  您可以使用as将短名称应用于名称较长的导入模块，这将稍微清理您的代码。您可以使用任何您想要的短名称，但显然最好让它具有相关性。使用此工具可以使上面的代码更简单一些，像这样导入：

import { BrowserRouter as Router } from "react-router-dom";

...并用该短名称替换组件标签。

<Router>
  <App />
</Router>

将Router正确合并到根组件后，您就可以在元素层次结构中向下移动一个级别，并开始在 组件中构建 Router的功能！****

Route Matchers

为了在Router中有效地创建网站的 URL 层次结构，您需要使用Route Matchers，其中有两个必需的组件： 和 。

请记住：我们必须首先在 App.js 的开头导入这两个组件，然后才能开始构建它们。****

import { Switch, Route } from "react-router-dom"

是这里的父容器组件。它告诉我们的应用程序读取其中的信息作为路由匹配信息。正如您可能已经预料到的那样，该信息由子组件组成：这些是 组件。

就像 一样， 也是一个容器组件，您可以在其中放置要在激活该特定 Route 时呈现的组件。此外，您需要在每个 的开始标记中包含一个路径属性。path属性将指示浏览器在激活该特定路由时将哪些 URL 扩展名添加到域名中。********

您现在可以在 组件中完全构建您的路由匹配，如下所示：****

import React from "react"
import { Switch, Route } from "react-router-dom"
import Header from "./Header.js"
import Home from "./Home.js"
import About from "./About.js"
import ContactInfo from "./ContactInfo.js"
import ContactForm from "./ContactForm.js"
import Footer from "./Footer.js"

export default function App() {
  return (
    <div>
      <Header />
      <Switch>
        <Route path="/about">
          <About />
        </Route>

        <Route path="/contact/form">
          <ContactForm />
        </Route>

        <Route path="/contact">
          <ContactInfo />
        </Route>

        <Route path="/">
          <Home />
        </Route>
      <Switch>
      <Footer />
    </div>
  )
}

确保最后放置路径最少的组件，以便浏览器可以正确选择您实际尝试到达的路径。例如， 被列在最后，因为“/”路径恰好是每个路由路径的起始字符。因此，如果您要路由到 ，​​ 会识别出“/”之后没有其他内容，它会跳过所有其他 组件，直到只有“/”的那个组件，然后渲染 。同样的逻辑就是为什么带有 的路由（您希望将其解释为“/contact”的子分支的组件** <联系信息/> 。

注意：  如果您希望以不同的方式排序，也许是为了可读性，您可以将exact prop 传递给特定的 组件。这会指示应用程序查找具有该确切路径的路线，无论它位于 中的哪个位置。

好的...你快到了。你只需要一个工具来完成 React Routing 难题。

Route Changers (aka Navigation)

现在您已经通过 和 设置了您的路线路径，您现在可以放置您的Route Changers。这些组件以 、 或 的形式出现。所有这些组件都可以根据您在 组件中创建的路由更改当前呈现的组件。

Route Changers可以放置在应用程序的任何位置，它们都需要一个to prop，它需要有一个对应的值来匹配给定的路径给你试图切换到的路径。如果成功完成，路由将更改并且所需的组件将呈现在页面上。

是具有最广泛功能的路由转换器。它只是在页面上创建一个 元素，该元素的href属性等于 to 属性的值。此标记将路由更改为具有该匹配路径的路由。您可以像这样为我们所有的路线创建 组件：

import { Link } from "react-router-dom"

export default LinkExamples() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact Information</Link>
      <Link to="/contact/form">Contact Form</Link>
    </div>
  )
}

import { NavLink } from "react-router-dom"

export default NavBar() {
  return (
    <nav>
      <NavLink to="/">Home</Link>
      <NavLink to="/about">About</Link>
      <NavLink to="/contact">Contact Information</Link>
      <NavLink to="/contact/form">Contact Form</Link>
    </nav>
  )
}

<Link to={`/contacts/${id}`}>Contact Information</Link>