FastAPI+React全栈开发21 探索React路由器和其他好东西

Chapter04 Setting Up a React Workflow

21 Exploring React Router and other goodies

FastAPI+React全栈开发21 探索React路由器和其他好东西

So far, we have only created a couple of single-page apps that are really single pages, we haven’t touched some advanced functionalities, and they do not even qualify as apps. However, single-page apps are not limited to a single URL, if you navigate to your Gmail account, you will see that the URL does, in fact, change with every action that you might take. While there are several solutions that enable us to achieve routing in Single-Page Applications (SPAs), React Router is the de facto standard solution, and it is a well-tested, mature package that has recently had a major update (version 6).

到目前为止，我们只创建了几个真正的单页应用程序，我们还没有触及一些高级功能，它们甚至不符合应用程序的标准。然而，单页应用程序并不局限于单一的URL，如果你导航到你的Gmail帐户，你会看到URL，事实上，随着你可能采取的每一个操作而改变。虽然有几种解决方案可以让我们在单页应用程序(spa)中实现路由，但React Router是事实上的标准解决方案，它是一个经过良好测试的成熟包，最近进行了一次重大更新(版本6)。

The underlying idea of a frontend page router is that it enables us to render different components on the same page depending on the route that is loaded. For instance, the /about route would cause the app to load a component called About.js in the main App component, removing other, previously loaded components and so on. In its latest versin, React Router has made some breaking changes, but the logic is unaltered. The package provides us with a basic structure BrowserRouter which is used to wrap our entire root App component. We will create a basic router for our cars application in the next chapter, but here, I just wawnt to convey the idea and the principles that lie underneath.

前端页面路由器的基本思想是，它使我们能够根据加载的路由在同一页面上呈现不同的组件。例如，/about路由会导致应用在主应用组件中加载一个名为about .js的组件，移除之前加载的其他组件，以此类推。在最新版本中，React Router做了一些突破性的改变，但逻辑没有改变。这个包为我们提供了一个基本的结构BrowserRouter，用来包装我们的整个App根组件。我们将在下一章中为我们的汽车应用程序创建一个基本的路由器，但在这里，我只想传达其思想和原理。

React itself is so popular and omnipresent that it has created an impressive ecosystem around itself. I have already mentioned that, besides Tailwind, you can use virtually any UI or CSS framework either directly or through some optimized React version, such as Bootstrap, or more reactly such as Ant design. We can enhance our user experience with subtle animations through React Motion, and we can speed up the developement of forms with some excellent form libraries such as Formik or React Hook Form. For complex state problems, Redux is the most popular and widely adopted industry standard, but there are many smaller or specialized libraries for local and global state management.

React本身是如此受欢迎和无处不在，它已经围绕自己创建了一个令人印象深刻的生态系统。我已经提到过，除了Tailwind之外，你几乎可以直接使用任何UI或CSS框架，也可以通过一些优化的React版本(如Bootstrap)或更间接的(如Ant design)来使用。我们可以通过React Motion通过微妙的动画来增强我们的用户体验，我们可以通过一些优秀的表单库(如Formik或React Hook form)来加速表单的开发。对于复杂的状态问题，Redux是最流行和广泛采用的行业标准，但是还有许多较小或专门的库用于本地和全局状态管理。

In this book, in our cars application, we will make a couple of charts, and we will see why data virulization specialists are turning to React. For instance, the combination of React Hooks and D3.js enables us to make virtually everything achievable with D3.js (and that’s a lot), while making data management easier through React. Bear in mind that we have barely scratched the surface of what is possible to achieve with React, and this chapter is really meant just to get you started and whet your appetile.

在本书中，在我们的汽车应用程序中，我们将制作一些图表，我们将看到为什么数据虚拟化专家正在转向React。例如，React Hooks和D3.js的结合使我们几乎可以用D3.js实现所有事情(而且很多)，同时通过React使数据管理更容易。请记住，我们仅仅触及了React可能实现的表面，这一章的真正意义只是让你开始并激发你的胃口。