React@16.x(38)路由v5.x(3)其他组件

目录

之前的文章中,已经介绍过了 BrowserRouter / HashRouterRouteSwitchwithRouter 这些组件。

再介绍3个常用的组件:

官方文档

生成一个无刷新跳转的 <a> 元素。

主要的属性:

  1. to
    • 字符串,表示跳转的路径
    • 对象,属性和 history.location 的属性相同。
  2. replace,表示跳转时是否替换当前地址,默认 false
  3. innerRef,可以将 Link 内部的 <a> 元素的 ref 附着到传递的对象或函数上。

无刷新跳转的大致原理:

js 复制代码
import { withRouter } from "react-router-dom";

function Link(props) {
    return (
        <a
            href={props.to}
            onClick={(e) => {
                e.preventDefault();
                props.replace ? props.history.replace(props.to) : props.history.push(props.to);
            }}
        >
            {props.children}
        </a>
    );
}

export default withRouter(Link);

node 就是 a 元素。
innerRef={node => { console.log(node)}}

官方文档

Link 的基础上实现的,并添加了额外的功能:

to 匹配到当前路径时,会对生成的 <a> 元素添加对应的类名或样式,来表示激活状态。

举例:

html 复制代码
<NavLink to="/b">跳转b</NavLink>

如果当前的路由路径是匹配到 /b 的(/b/b/c 等),则 <NavLink> 会给对应的 <a> 元素添加 class="active",这样就可以设置激活状态的 <a> 元素的样式了。

生成的 <a> 元素

html 复制代码
<a aria-current="page" class="active" href="/b">跳转b</a>

主要的属性:

  1. activeClassName,匹配时的类名,默认 active
  2. activeStyle,匹配时的样式,可以直接写内联样式。
  3. exactsensitiveRoute 组件对应的属性的含义一致。

3,Redirect

官方文档

重定向组件,当加载到该组件时,会自动无刷新的跳转到指定的地址。

举例1 :除了 /a/b,其他任何路径都会重定向到 /a

html 复制代码
<Router>
    <Switch>
        <Route path="/a" component={A}></Route>
        <Route path="/b" component={B}></Route>
        <Redirect to="/a">重定向到 /a</Redirect>
    </Switch>
</Router>

举例2 :当访问根路径时,登录状态则重定向到 /dashboard,否则渲染 <PublicHomePage /> 组件

html 复制代码
<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

主要的属性:

  1. to,表示要重定向的路径。字符串或对象,和 <Link>to 属性一样。
  2. push,表示重定向跳转是 push | repalce,默认 false
  3. from,表示匹配到 from 对应的路径规则,才会进行跳转到 to
  4. exact,是否精确匹配 from
  5. sensitive,匹配 from 时是否对大小写敏感。

tofrom 都可以写正则表达式,和 <Route path="/a/:id"> 一样。

举例3

html 复制代码
<Redirect from="/c/:id" to="/a">重定向到 /a</Redirect>

当匹配到 /c/xxx 时,才会跳转到 /a

举例4

html 复制代码
<Redirect from="/c/:id" to="/a/:id">重定向到 /a</Redirect>

当匹配到 /c/xxx 时,会跳转到 /a/xxx


以上。

相关推荐
魔云连洲5 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年9 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒15 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku21 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing26 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042727 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说30 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567035 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试