zoukankan      html  css  js  c++  java
  • react 路由

    React Router

    React Router由三个包组成:react-router, react-router-dom, react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。进行网站(将会运行在浏览器环境中)构建,我们应当安装 react-router-dom。

    <BrowserRouter>与<HashRouter>

    BrowserRouter:

      原理是H5的history API,IE9及以下不兼容,需要由web server支持,在web client这边window.location.pathname被react router解析,example.com/react/route

    HashRouter:

      原理是URL的hash,不需要由web server支持,因为它的只有‘/’path需要由web server支持,而#/react/route URL不能被web server读取,在web client这边window,location.hash被react router解析,example.com/#/react/route

    Route

    Route控制路径下显示对应的组件,其exact属性控制绝对匹配到path路径时才会显示组件;path属性指明路径(BrowserRouter的basename下的某个页面路径);component表示要显示的组件。

    <Link>与<NavLink>点击发生页面跳转(其实最终渲染为<a>标签),跳转将更新到对应路径的Route所指的组件上。<NavLink>扩展了<Link>,匹配上url时为渲染的元素添加参数:

    • activeClassName(string):选中状态时添加的类名,可设置选中样式
    • activeStyle(object):被选中时为此元素添加样式
    • exact(bool):为true时,只有当导致和绝对匹配class和style才会应用
    • strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的路径
    • isActive(func)判断链接是否激活的额外逻辑的功能

    Switch

    <Switch>组件包裹一组的<route>,依次匹配并选择渲染选中的route组件。

    Link

    前面的<Route>提供了路由配置,<NavLink><Link>就是可以访问这些路由的组件。我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载。

  • 相关阅读:
    ASP.NET Web API 2 之文件下载
    Windows 查看某个端口号是否被占用
    C# 数据类型之 String(字符串)
    数据表对应关系(一对一、一对多、多对多)
    嫁给程序员的好处,你get到了吗?
    ASP.NET Web API 2 之 HttpRequestMessage 对象
    C# 使用 log4net 记录日志
    Chrome 浏览器快捷键
    C# 获取程序运行时路径
    SpringBoot整合Pagehelper分页插件
  • 原文地址:https://www.cnblogs.com/zzalmo/p/11313055.html
Copyright © 2011-2022 走看看