React Router,常用API有哪些?

这篇具有很好参考价值的文章主要介绍了React Router,常用API有哪些?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

react-router

React Router是一个用于构建单页面应用程序(SPA)的库,它是用于管理React应用中页面导航和路由的工具。SPA是一种Web应用程序类型,它在加载初始页面后,通过JavaScript来动态加载并更新页面内容,而不是在每次页面切换时都请求完整的新页面。通过React Router可以在React应用中实现客户端路由,在不刷新整个页面的情况下切换到不同的视图或页面。

React Router是由多个包组成的库,每个包都提供了不同的功能。以下是React Router主要的包:

  1. react-router-dom:这是React Router的核心包,用于构建Web应用的路由。它包括了用于在浏览器中实现客户端路由的组件,如BrowserRouter、Route、Link等。大多数Web应用都会使用这个包来管理路由。

  2. react-router-native:这个包是React Router的一个扩展,用于构建React Native应用的路由。它提供了类似于react-router-dom的API,但专门针对React Native环境进行了优化。

  3. react-router(不带后缀):这是React Router的核心包,它包括了一些通用的路由功能,可以在Web和Native应用中使用。但在实际开发中,通常会使用react-router-dom或react-router-native,具体根据应用类型来选择。

除了上述主要的包,React Router还提供了一些辅助工具和附加功能的包:

  1. react-router-config:这个包用于将路由配置信息提取到一个单独的地方,以便于静态路由渲染。这对于服务器渲染React应用非常有用。

  2. react-router-redux:这个包用于与Redux集成,以便在Redux存储中管理路由状态。

  3. @reach/router:虽然不是React Router的一部分,但它是一个与React Router兼容的替代品,提供了一些不同的API和性能特性。它专注于可访问性和无障碍性。

在大多数情况下,使用react-router-dom是构建Web应用的首选选择。

react-router-dom

react-router-dom提供了许多API,用于构建Web应用的客户端路由。以下是一些react-router-dom的主要API以及它们的简单示例用法:

  1. BrowserRouter:用于包装应用程序,启用基于浏览器的路由。
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}
  1. Route:用于定义路由匹配的路径和要渲染的组件。
import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}
  1. Link:用于创建导航链接。
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}
  1. Switch:用于包装多个Route,只渲染第一个匹配的路由。
import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
}
  1. Redirect:用于在路由重定向时进行配置。
import { Redirect } from 'react-router-dom';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

React Router DOM提供的自定义Hook
react-router-dom还提供了一些自定义Hook,用于在函数组件中访问路由相关信息。例如:

  1. useHistory:

    useHistory Hook 允许你在组件中访问路由历史对象,以便进行编程式导航,例如在按钮点击或其他事件中跳转到不同的路由。

    import { useHistory } from 'react-router-dom';
    
    function MyComponent() {
      const history = useHistory();
    
      const handleButtonClick = () => {
        // 编程式导航到'/about'路由
        history.push('/about');
      };
    
      return (
        <div>
          <button onClick={handleButtonClick}>Go to About</button>
        </div>
      );
    }
    
  2. useLocation:

    useLocation Hook 允许你访问当前路由的location对象,包括路径、查询参数等信息。

    import { useLocation } from 'react-router-dom';
    
    function MyComponent() {
      const location = useLocation();
    
      return (
        <div>
          <p>Current Path: {location.pathname}</p>
          <p>Query Parameters: {location.search}</p>
        </div>
      );
    }
    
  3. useParams:

    useParams Hook 用于获取当前路由的动态路由参数。当你在路由定义中使用参数占位符时,你可以使用这个Hook来获取传递给路由的参数值。

    import { useParams } from 'react-router-dom';
    
    function UserProfile() {
      const { username } = useParams();
    
      return (
        <div>
          <h2>User Profile</h2>
          <p>Username: {username}</p>
        </div>
      );
    }
    

参数传递

在react-router-dom中,你可以使用路由参数来传递和获取参数。参数通常用于将动态数据传递给组件,例如用户ID或产品ID。

  1. 定义带参数的路由

    首先,在路由配置中定义带有参数的路由。使用:parameterName来表示参数占位符。例如:

    <Route path="/user/:userId" component={UserProfile} />
    
  2. 使用useParams Hook获取参数

    在要接收参数的组件中,使用useParams Hook来获取参数的值。例如:

    import { useParams } from 'react-router-dom';
    
    function UserProfile() {
      const { userId } = useParams();
    
      return (
        <div>
          <h2>User Profile</h2>
          <p>User ID: {userId}</p>
        </div>
      );
    }
    

    在上面的示例中,使用useParams Hook来获取路由参数中的userId。这个参数的值将根据实际的路由路径动态获取。

  3. 传递参数

    若要传递参数到带参数的路由,可以在<Link>组件或编程式导航中设置参数。例如:

    使用<Link>组件:

    import { Link } from 'react-router-dom';
    
    function UserList() {
      return (
        <ul>
          <li><Link to="/user/1">User 1</Link></li>
          <li><Link to="/user/2">User 2</Link></li>
          {/* ... */}
        </ul>
      );
    }
    

    编程式导航:

    import { useHistory } from 'react-router-dom';
    
    function navigateToUserProfile(userId) {
      const history = useHistory();
      history.push(`/user/${userId}`);
    }
    

V5 和 V6的使用区别

  1. <Switch> 全部改为 <Routes>
// v5
 import {Route, Switch} from 'react-router-dom' //引入react-router
 
<div>
    <Switch>
    </Switch>
</div>
 // v6
  import {Route, Routes } from 'react-router-dom' //引入react-router
 
 <div>
    <Routes >
    </Routes>
 </div>
  1. Route 的 render 和 component 改为 element,且可以嵌套路由
// v5
 import {Route, Switch} from 'react-router-dom' //引入react-router
<div>
    <Switch>
        <Route path="/about">
            <About />
        </Route>
    </Switch>
</div>
// v6
 import {Route, Routes } from 'react-router-dom' //引入react-router
<div>
    <Routes >
        <Route path="/about" element={<About />} />
    </Routes>
</div>
  1. to、navigate、path 不以 / 开头都是相对路径,与 cd 命令行类似
    在 v5 中,以 / 开头的 <Link to> 值是不明确的;它取决于当前的 URL 是什么。例如,如果当前的 URL 是 /users ,那么 v5 中的 将呈现为 <a href="/me"> 。然而,如果当前的 URL 有一个尾随斜杠,比如 /users/ ,同样的 将呈现为 <a href="/users/me"> 。这使得很难预测链接的行为,因此在 v5 中,从根 URL(使用 match.url )构建链接,而不是使用相对的 <Link to> 值。
    React Router v6 修复了这种不确定性。在 v6 中,无论当前的 URL 是什么, <Link to="me"> 都将始终呈现相同的 <a href>
    例如,在 <Route path="users"> 中呈现的 <Link to="me"> 将始终呈现到 /users/me 的链接,无论当前的 URL 是否有尾随斜杠。

  2. v6 用useNavigate实现编程式导航,不再使用useHistory
    naviaget(to)默认就是 history.push,naviaget(to, { replace: true })就是 history.replace,naviaget(to: number)就是 history.go。文章来源地址https://www.toymoban.com/news/detail-732878.html

import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

到了这里,关于React Router,常用API有哪些?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(54)
  • React js原生 详解 HTML 拖放 API(鼠标拖放(拖动)功能)

    最近碰到了个需求,大概就是要通过可视化拖拽的方式配置一个冰柜,需要把预设好的冰柜内部架子模板一个个拖到冰箱内。一开始的想法是用鼠标事件(mousedown、mouseup等)那一套去实现,能实现但是过程过于复杂,需要控制的状态太多了。其实 Web Api 为 html 元素拖拽量身定

    2024年01月22日
    浏览(43)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(47)
  • react native 0.73 配置 react-native-fs

    npm yarn android/settings.gradle android/app/build.gradle androidappsrcmainjavacomreactnative_demoMainApplication.kt 把原代码 改为

    2024年04月08日
    浏览(43)
  • React与React Native的异同

    开发React一段时间了,一直没有搞清楚React和React Native的差异。今天特意去了解下,发现差异还真不小! 相同点: 1.都是Facebook公司推出的框架。 2.都是基于JSX语言开发的。 差异点: 1、作用的平台不同. 2、工作原理不同. 3、渲染周期不同. 4、组件构成形式不同. 5、宿主平台的

    2024年02月06日
    浏览(43)
  • 探索React Native的世界:gorhom/react-native-animated-tabbar

    项目地址:https://gitcode.com/gorhom/react-native-animated-tabbar 在移动应用开发领域,React Native以其高效、跨平台的能力受到了广泛的欢迎。今天,我们要向您推荐一个极具创意且实用的React Native组件库——gorhom/react-native-animated-tabbar。它是一个精美设计的动画TabBar,为您的应用提供生

    2024年04月17日
    浏览(82)
  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(57)
  • react---react router 5 基本使用

    目录 1.路由介绍 2.路由使用 3.路由组件和一般组件 4.Switch 单一匹配 5.解决二级路由样式丢失的问题 6.路由精准匹配和模糊匹配 7.Redirect路由重定向 1.路由介绍 路由是根据不同的 URL 地址展示不同的内容或页面,在 SPA 应用中,大部分页面结果不改变,只改变部分内容的使用。

    2024年02月09日
    浏览(31)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: API介绍合集:

    2024年02月11日
    浏览(34)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包