账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react15.1更新到react16.4,router有必要也跟着更新吗
    54
    0

    背景:
    这几天闲的想体验一下新版react的特性,故想将项目的react更新到16版本。
    问题
    react更新到16.4后,React.PropTypes废弃,项目跑起来之后,发现使用React.PropTypes的地方只有node_modules中的react-router,要手动将react-router文件夹中的React.PropTypes改为

    import PropTypes from "react-types"

    PropTypes 吗?还是说将react-router也升级到4.X,我昨天试着将react-router2.X升到react-router4.X,但能力有限,升了一天半还没搞定,故来问问大家是怎么搞定的。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 傅家二少 普通会员 1楼

      在React 15.1升级到React 16.4的过程中,虽然React官方推荐不建议对所有项目都进行架构升级,但如果你计划在React 16.4中引入新的特性、功能或者升级现有架构,那么router模块可能需要进行相应的更新。

      router是React Router库的一部分,它负责路由管理、状态管理以及错误处理等功能。在React 15.1中,React Router引入了全新的API,使得在创建路由、获取路由参数、导航到不同页面等功能更加简单和高效。以下是router在React 16.4中的一些重要更新和注意事项:

      1. 新的API:
      2. useLocation: 使用React Router 16.4引入的新API,它提供了一个useLocation Hook,可以获取和设置当前URL和路由信息。例如: ```javascript import { useLocation } from '@react-router-dom';

      function MyComponent() { const { pathname } = useLocation(); // 使用 pathname 来导航到指定的页面 } ```

      • useLocationOnEnter: useLocationOnEnter 和 useLocationOnLeave Hook提供了更丰富的状态管理功能,例如,当导航到新的页面时,会更新组件的状态。例如: ```javascript import { useLocationOnEnter } from '@react-router-dom';

      function MyComponent() { const { pathname } = useLocationOnEnter(); // 当导航到新的页面时,更新组件的状态 // ... } ```

      • useRouter: useRouter Hook允许你管理React Router实例,例如,添加新的路由、删除已有的路由、获取和设置路由的属性等。例如: ```javascript import { useRouter } from '@react-router-dom';

      function MyComponent() { const router = useRouter(); // 获取或设置路由的属性 // ... } ```

      • useHistory: useHistory Hook提供了一个API,可以获取和设置浏览器的历史记录,这对于使用路由的副作用处理和页面跳转很有用。例如: ```javascript import { useHistory } from '@react-router-dom';

      function MyComponent() { const history = useHistory(); // 使用 history.push() 方法跳转到新的页面 // ... } ```

      1. 未使用的API:
      2. useStaticRouter: 在React 16.4中,useStaticRouter Hook已被弃用,因为它在较旧的版本中会抛出错误。如果你仍然使用此功能,可以使用useRouter Hook代替。
      3. useParams: 在React 16.4中,useParams Hook已被移除,你可以通过将URL参数传递给useLocation Hook来获取和设置URL参数。例如: ```javascript import { useLocation } from '@react-router-dom';

      function MyComponent() { const { pathname } = useLocation(); // 使用 pathname 来导航到指定的页面,并获取或设置 URL 参数 const params = { param1: 'value1', param2: 'value2' }; // ... } ```

      • useRouteMatch: 在React 16.4中,useRouteMatch Hook已被移除,你可以通过将路由匹配对象传递给useLocation Hook来获取和设置路由匹配。例如: ```javascript import { useLocation } from '@react-router-dom';

      function MyComponent() { const { pathname } = useLocation(); // 使用 pathname 来导航到指定的页面,并获取或设置路由匹配对象 const match = { route: { path: 'newPath' } }; // ... } ```

      1. 修复的问题和兼容性:
      2. useLocation 更新引入了一些已知的问题和修复。例如,它修复了在子路由中使用location参数时导致的报错问题,以及在导航到子路由时可能丢失数据的问题。此外,它还支持使用子路由的状态来改变路由参数。
      3. useRouter 更新引入了一些新功能,例如,它支持在多个 Router 实例之间共享 useRouter,并提供了更直观的路由状态管理方式。此外,它还支持获取和设置 Router 的 currentLocation 属性,这在与子路由的导航和状态同步中非常有用。

      4. 性能优化:

      5. 由于React Router 16.4引入了一些新的 API,它们可能对性能产生一定的影响。例如,useLocation 从旧版本中移除了一些操作,导致了一些性能开销。建议根据项目的具体情况评估这些新的 API 的性能影响,并在性能优化方面做出相应的调整。

      总之,虽然在React 16.4中对router进行了许多改进和更新,但如果你计划在React 16.4中引入新的特性、功能或者升级现有架构,那么可能需要对router进行相应的更新。然而,具体更新的策略和细节需要根据项目的需求和实际情况来确定,例如,你可能需要考虑使用新的 API、增加新的路由属性、优化性能或者处理导航副作用等。在进行这些修改之前,建议先进行充分的测试和调试,确保新的代码能够正常工作并符合项目的需求。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部