使用 React 🐘Router

什么是 React Router？

我们现在就玩吧。

使用 React-Router-Dom。

什么是 React Router？

React Router 帮助我们在 React 应用程序中进行路由，并且 React Router 中的一切都是基于组件的。

它是动态路由还是静态路由？

动态路由。

在 React Apps 中实现路由有哪些要求？

首先，我们需要安装名为react-router-dom 的包。

npm i -s react-router-dom

我们现在就玩吧。

在你的 src 目录中创建一个 routes.js 文件，如下图所示。

在 routes.js 文件中，我们需要导入 React 和路由组件。

然后我们需要导入需要路由的组件。

像上图一样，我导入了 App 组件和 Posts 组件。

让我们定义一个带有路由的新组件。

上面的代码是什么.....

我认为它看起来非常有趣。

链接：链接组件用于定义导航。
路由：路由组件用于定义路由。
精确：当我的 URL 为/时，请精确加载 App 组件。

首先，我们需要包装路由器组件。

就这样，我们的路由就完成了。

现在在您的 index.js 中，我们需要添加这些路由组件。

打开您的 App.js 文件或您在路由中使用的组件，将 console.log(this.props) 添加到代码中，如下图所示。

现在运行你的开发服务器。

您在浏览器控制台中看到什么了吗？

我们的组件中有一个可用的对象。

谁给了我们这个物品？

答案是，每当我们为该组件声明路由时，React 路由器就会将对象传递给我们的组件。

例如，我们定义了 App 组件和 Posts 组件的路由，以便这些组件现在可以感知上图中的这些对象。