让我们谈谈框架
塑造这种复杂的网络开发语言的一种方法是通过框架。一个编程框架是：
“......一种抽象，其中软件......可以通过额外的用户编写的代码有选择地改变，从而提供特定于应用程序的软件。它提供了一种构建和部署应用程序的标准方法，并且是一个通用的，可重用的软件环境提供特定功能作为更大软件平台的一部分，以促进软件应用程序、产品和解决方案的开发。”¹
很酷，对吧？
框架提供了大量额外的效率和功能，这对于普通（普通）代码来说是一个遥远的幻想。确实，一旦您对框架下的底层语言和逻辑有了扎实的了解，框架就是合乎逻辑的下一步。这就引出了我们这篇文章的主题：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> ) } 复制代码
是最后一个路由更改器，旨在根据某些客户端条件强制导航，例如用户是否已登录以及是否应该只能访问某些路径。我不会在这里演示这个 - 也许下次吧！
最后，链接可用于动态呈现路线，使用id道具并基于此获取特定数据对象，以用于呈现此路线。id被格式化到 中，如下所示：
<Link to={`/contacts/${id}`}>Contact Information</Link> 复制代码
总之...
React Routing 是为用户创建动态 Web 应用程序的有效方式。如果您还没有开始使用这个强大的工具，我强烈推荐它。我希望这篇文章帮助 React Router 看起来更简单。
作者：happyEnding
链接：https://juejin.cn/post/7205957899653726267
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
