【React】React-router的使用记录

无道 2020-07-21 0 条评论 前端相关 阅读63 手机阅读

1. 前言

官方文档地址:https://reactrouter.com/web/guides/quick-start

2. 高阶组件

先说一下高阶组件的意思,一个函数 接受一个组件作为参数 返回一个新的组件

功能性的封装 减少重复代码

一般被高阶组件处理过的组件获取数据 都从props获取

3. Router

Router就是路由器,里面包含若干个Route(路由)

常用的Router有两个:

1、<BrowserRouter>

2、<HashRouter>

BrowserRouter即在浏览器地址栏中不显示#,而是以传统的URI显示

而HashRouter就是以#为间隔符,显示URI

前者相比于后者利于SEO

4. Route

Route包含在Router中,但更多情况下,我们直接都是把Router放在“根”上,也即App上:

import React from "react";
import ReactDom from "react-dom";
import App from "./pages/App";
import {BrowserRouter as Router} from "react-router-dom"

ReactDom.render(
    <Router>
        <App/>
    </Router>
    , document.getElementById("root"));

这样,在其他组件内,就不用让Router包裹Route了


那么如何使用Route呢?

Route有两个特别重要的属性:path和component

<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>

这样,当匹配到/hello时,就会显示Nav1组件的内容


当然,这样是默认继续匹配的,什么意思呢?当匹配到/hello时,如果还有/hello/hello路径的话,也会继续匹配

解决办法也很简单,使用Swtich组件即可

也即,在Route上再包一层Switch

<Switch>
    <Route path="/hello" component={Nav1}/>
    <Route path="/world" component={Nav2}/>
</Switch>

官网对于Switch时这样介绍的:

Renders the first child <Route> or <Redirect> that matches the location.

嵌套路由

在路由里套路由 所有的组件你都可以使用使用 Link Switch ..

嵌套路由的上一级 千万不能加exact匹配

<Route path='/singer' render={()=>{
  <Route xxx={xxx}></Route>
  <Route xxx={xxx}></Route>
}}></Route> 

说完基本的路由后,需要认识“导航链接”

基本理解就是通过导航链接跳转到相应路由,毕竟你不会让用户自行在浏览器地址上输入相应的URI吧?

简单理解,就是一个a标签罢了!

<Link to="/hello">导航1</NavLink>
<Link to="/world">导航2</NavLink>

有一个基本属性,就是to,也即要导航到的路径


NavLink

Link已经足够用了,但是一般导航我们都有一个激活class,但该导航激活后,会有个高亮的效果,那么如何实现呢?

一般情形下,如果使用NavLink的话,会自动添加一个名为active的class,如果要自定义,那么给NavLink添加要给属性即可:activeClassName

<NavLink to="/hello">导航1</NavLink>
<NavLink to="/world">导航2</NavLink>

传递隐形参数

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

其中state就是你要隐形传递的数据,这里的数据时不会显示在地址栏或者哪里的

replace

<Link
  replace={true}
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

代表不留下历史记录

6. Param

路由传参

在路径上加上:参数名即可,如果可空,那么使用:参数名?

如:

<NavLink to="/hello/:id?">导航1</NavLink>
<NavLink to="/world/:id">导航2</NavLink>

7. NotFound

如果未找到页面,返回404,如何做?

在所有Route后面再加上一个Route,返回一个404组件即可,但是,注意:

需要使用Switch来包裹,或者每个Route都是用exact属性,来使精准匹配URL

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: react react-router
修改: 07月21日 12:09
下一篇: 没有下一篇啦~
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~