React Router初学者入门指南（2023版）

最新推荐文章于 2024-07-27 11:38:12 发布

前端达人

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量336

点赞数

文章标签： react.js javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/134086012

版权

React Router是管理React应用路由的流行库，避免页面刷新，提供无缝导航。本文介绍如何设置环境，理解路由概念，如History Stack和Location，并通过BrowserRouter、Routes和Route组件实现导航。还讲解了404页面、Link与NavLink的区别、嵌套路由、动态路由及useParams、useRoutes钩子的使用。

摘要由CSDN通过智能技术生成

React Router，简单来说，是一个帮助处理React应用程序中导航和路由的库。它是用于管理React中路由的最流行的路由工具。如果你对路由的概念不熟悉，可以将其视为在网站的不同部分之间导航的过程。例如，当你进入网站的“联系我们”部分时，你已经成功进行了一次路由过程。本文将为您提供有关React Router的所有细节，以便您可以充分利用它。

如果你对React Router还不熟悉，你可能习惯使用普通的链接（a标签）在你的应用程序中进行导航。然而，当你想在导航时保留应用程序的当前状态时，就会出现问题。不幸的是，普通的链接通常会触发页面刷新来显示组件，从而破坏用户体验。这就是React Router的用武之地。

React Router允许您在应用程序中定义不同的路由，并将它们链接到各自的组件，而无需重新加载页面。这种方法使得React Router能够轻松更新页面上的内容，并使网站感觉像一个原生应用程序。

使用React Router还有其他好处，比如创建复杂的导航、无缝的页面导航结构以及对动态URL的支持。

设置环境

要理解React Router的工作原理，最好的方法之一是构建一个简单的网站。因此，让我们构建一个小型的历史网站，不要太复杂。

所以，让我们准备好一切开始使用React Router所需的东西。

安装React：有几种方法可以做到这一点，但让我们选择最简单的方法：create-react-app（CRA）。通过代码编辑器终端安装React，运行以下命令：

npx create-react-app history-app

然后，通过运行cd history-app导航到创建的React应用程序。

安装React Router：要在React网站中安装react-router包，请在终端中运行以下命令：

npm install react-router-dom

这个命令允许你安装React Router，一个必要的包。

完成后，您可以通过运行npm start来启动React应用程序。就是这样！React和React Router已经准备好使用了。

让我们添加一些React组件，以便在历史应用程序上获得一些虚拟内容。您只需将其复制并粘贴到App.js中，即默认的应用程序组件。

export default function App() {
 return (
   <>
     <Home />
   </>
 );
}

function Home() {
 return (
   <div>
     <h1>The Paradise of History</h1>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vero
       laudantium repella
     </p>
   </div>
 );
}

function Eras() {
 return (
   <div>
     <h1>The Eras of Time</h1>
     <ul>
       <li>
         <a href="/">Medieval</a>
       </li>
       <li>
         <a href="/">Digital</a>
       </li>
     </ul>
   </div>
 );
}

运行后的效果

理解路由概念

在我们继续之前，让我们快速了解一些React Router中的关键概念：

History Stack：React Router智能地使用HTML5 History API来跟踪用户的导航历史。当用户访问一个新的URL时，React Router将该URL推送到历史堆栈中。当用户导航到其他URL时，它们也会被推送到堆栈中。这就是React Router在不刷新页面的情况下来回导航路由的方式。

Location：这指的是在浏览网站时当前所在的URL。它是历史堆栈中的顶级URL，以及React Router如何动态更改显示的内容以匹配正确的URL。