react中react-router-dom的使用方法

react中的路由介绍

        现代的前端应用大多都是 SPA(单页应用程序),也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)

  • 前端路由是一套映射规则,在React中,是 URL路径组件 的对应关系

  • 使用 React 路由简单来说就是:配置路径和组件(配对)

React路由使用的基本

        步骤

  1. 安装包.npm i react-router-dom(最近刚出6)
    1. 这个包提供了三个核心组件:HashRouter, Route, Link
  2. 导入包,并使用。使用HashRouter包裹整个应用,一个项目中只会有一个Router
import { HashRouter, Route, Link } from 'react-router-dom

     3.使用Link指定导航链接

        代码演示

import React from 'react'
import ReactDom from 'react-dom'
import { HashRouter, Route, Link } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <HashRouter>
        <Link to="/comment">评论</Link>
        <Link to="/search">搜索</Link>

        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </HashRouter>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

路由三大对象之-Router

了解两种路由

HashRouter :hash模式

BrowserRouter: history模式

内容

Router 组件:包裹整个应用,一个 React 应用只需要使用一次

两种常用 Router:HashRouterBrowserRouter

  • HashRouter:使用 URL 的哈希值实现

    • 原理:监听 window 的 hashchange 事件来实现的

  • (推荐)BrowserRouter:使用 H5 的 history.pushState() API 实现

    • 原理:监听 window 的 popstate 事件来实现的

代码推荐:

        使用es6的导入重命名来统一名字: 无论导入的是哪个路由对象,都叫Router

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { HashRouter as Router, Route, Link } from 'react-router-dom'

路由三大对象之-Link

区别

掌握Link和NavLink的区别

能使用NavLink设置高亮效果

导入测试

import { Link, NavLink } from 'react-router-dom

Link

Link组件最终会渲染成a标签,用于指定路由导航

  • to属性,将来会渲染成a标签的href属性

  • Link组件无法展示哪个link处于选中的效果

NavLink

NavLink组件,一个更特殊的Link组件,可以用用于指定当前导航高亮

样式名称为.active可以自行修改高亮效果.

说明:

  • to属性,用于指定地址,会渲染成a标签的href属性

  • activeClassName: 用于指定高亮的类名,默认active。一般不去修改。

  • exact: 精确匹配,表示必须地址栏和to的属性值 精确匹配类名才生效

测试代码

        

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import Search from './pages/Search.jsx'
import Comment from './pages/Comment.jsx'
export default function App () {
  return (
    <div>
      <h1>react路由基本使用-Link</h1>
      <Router>
        <div>
          Link:
          <Link to="/search">搜索</Link>
          <Link to="/comment">评论</Link>
        </div>
        <div>
          NavLink: 自带高亮类
          <NavLink to="/" exact>主页</NavLink>
          <NavLink to="/search">搜索</NavLink>
          <NavLink to="/comment">评论</NavLink>
        </div>
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

小结

  1. link和NavLink都用来做路由跳转。它们都用to属性来指定跳转地址

  2. link和NavLink的区别是,NavLink指向的路径会自带一个名为.action的css类名

路由三大对象之-Route

route的作用和格式

  1. 作用: 决定路由匹配规则

  2. 格式:<Route path="/xx/xx" component={组件}></Route>

匹配规则

名词约定:

  1. path: Route组件中path属性的值

  2. pathname: 指的如下格式

    1. link组件中to的属性值

    2. 地址栏中的地址

模糊匹配规则

  1. 只要pathname以path开头就算匹配成功

  2. 匹配成功就加载对应组件;

  3. 整个匹配过程是逐一匹配,一个匹配成功了,并不会停止匹配

模糊匹配和精确匹配

  1. 默认是模糊匹配的

  2. 补充exact可以设置成精确匹配

示例

import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
const Home = () => <div>主页</div>
const Article = () => <div>文章列表页</div>
const ArticleDetail = () => <div>文章详情页</div>
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <NavLink to="/">主页</NavLink>&nbsp;
        <NavLink to="/article">文章列表页</NavLink>&nbsp;
        <NavLink to="/article/123">文章详情页-123</NavLink>&nbsp;
        <hr />
        <Route path="/" component={Home} />
        <Route path="/article" component={Article} />
        <Route path="/article/123" component={ArticleDetail} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

小结

  • path 的说明

    • 默认情况下,/能够匹配任意/开始的路径

    • 如果 path 的路径匹配上了,那么就可以对应的组件就会被 render

  • exact , exact 表示精确匹配某个路径

    • 一般来说,如果路径配置了 /, 都需要配置 exact 属性

Switch与404

Switch

用Switch组件包裹多个Route组件。

Switch组件下,不管有多少个Route的路由规则匹配成功,都只会渲染第一个匹配的组件

 <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />
        </Switch>

处理404页

思路: 不设置path属性,将404页对应的路由放在switch内部的最后位置

          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />

页面跳转 Redirect

<Redirect from="/" exact to="/comment" />

上一篇:springboot 集成J2Cache


下一篇:gdb+jlink调试MCU