react获取当前路由地址（react 获取当前路由）



使用React Router进行页面导航是构建单页应用（SPA）的关键部分。React Router允许你根据不同的URL显示不同的组件，而无需重新加载整个页面。下面是如何设置和使用React Router的步骤，以及一个详细的例子。

安装React Router

首先，你需要安装库，这是React Router专门为Web应用提供的版本。你可以通过npm或yarn来安装它：

基本概念

• BrowserRouter：这是React Router用于处理基于浏览器历史记录的路由。
• Routes 和 Route：是一个容器，用来包裹多个元素。每个定义了当路径匹配时要渲染的组件。
• Link：提供了一种声明式的方式来创建链接，用户点击这些链接后会导航到对应的路径。
• useNavigate Hook：这个Hook让你可以在函数组件中以编程方式导航到不同的路径。

示例代码

假设我们有一个简单的React应用，有两个页面：主页(Home)和联系(Contact)页面。我们将展示如何使用React Router来实现这两个页面之间的导航。

1. 创建两个React组件 和 ：

2. 在你的主应用文件 中设置路由：

在这个例子中， 是路由的核心，它监听浏览器地址栏的变化，并更新当前路径。 包含了所有可能的路由配置。 定义了特定路径与哪个组件相对应。例如，当用户访问根路径时，将显示组件；当用户访问时，将显示组件。

3. 使用组件可以创建导航链接。在上面的例子中，我们在导航条里创建了两个链接，分别指向和。
4. 如果你想为未匹配的路径创建一个“404页面未找到”的组件，你可以添加一个带有通配符的：

   然后在中添加这个路由：

这样，如果你尝试访问一个不存在的路径，就会显示组件。

以上就是使用React Router进行基本页面导航的方法。随着应用复杂度的增加，你还可以探索更高级的功能，比如嵌套路由、动态路由参数等。

🌟 加入【技术图书分享与阅读笔记】，一起遨游知识的星海！ 🌟

在这个快速变化的时代，技术日新月异，唯有不断学习才能保持竞争力。【技术图书分享与阅读笔记】是一个充满活力和热情的学习社区，我们专注于最新的技术趋势和技术图书，致力于为每一位成员提供一个持续成长和交流的平台。

在这里，你可以：

• 获取最新技术资讯：我们持续关注前沿技术动态，确保你不会错过任何重要的技术更新。
• 共同阅读最新技术图书：每月精选一本高质量的技术书籍，与志同道合的朋友一起阅读、讨论，共同进步。
• 分享学习笔记和心得：定期更新学习笔记和心得，帮助你更好地理解和吸收知识。
• 互动交流，共同成长：与来自各行各业的技术爱好者交流经验，互相激励，共同解决学习中的难题。

无论你是技术新手还是资深开发者，【技术图书分享与阅读笔记】都欢迎你的加入！让我们一起探索技术的奥秘，享受学习的乐趣，共同在知识的星海中遨游！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/12869.html