让我们谈谈框架

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

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

很酷，对吧？

框架提供了大量额外的效率和功能，这对于普通（普通）代码来说是一个遥远的幻想。确实，一旦您对框架下的底层语言和逻辑有了扎实的了解，框架就是合乎逻辑的下一步。这就引出了我们这篇文章的主题：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>
  )
}
复制代码

...非常简单！

另一方面，是一个具有更具体目的的路由转换器。顾名思义，此组件旨在包含在导航栏中。除了像一样改变当前路线之外，它还能够根据其作为当前活动路线的状态改变其外观。这就是为什么这个组件需要props to和activeClassName的原因。当相应的路线处于活动状态时，将采用等于该activeClassName 属性值的类名。最好的做法是将这些组件嵌套在导航栏组件中，可能称为 ********************. 这就是该组件的样子：

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

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

React Router

让我们谈谈框架

React Router

是时候分解它了……

Routers

Route Matchers

Route Changers (aka Navigation)

总之...

热门文章

最新文章

相关课程

相关电子书