React 路由使用的基本

最新推荐文章于 2023-07-04 11:46:25 发布

捧鲜花的唐老鸭

最新推荐文章于 2023-07-04 11:46:25 发布

阅读量572

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58207509/article/details/121346313

版权

废话不多说直接上步骤

基础步骤

第一步

安装包。

npm i react-router-dom@5.3.0

这个包提供了三个核心的组件:HashRouter, Route, Link

(上个月刚刚出了6.0还不是很稳定,稳定了再用哈)

第二步

导入包，并使用。

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

第三步

使用Link指定导航链接

使用Route指定路由规则(哪个路径展示哪个组件)

路由三大对象之-Router

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

俩种常用Router: HashRouter和 BrowserRouter(推荐)

HashRouter:

使用 URL 的哈希值实现

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

BrowserRouter:

使用 H5 的 history.pushState() API 实现

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

路由三大对象之-Link

Link:指定导航链接 常用有Link与NavLink

Link:

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

to属性，将来会渲染成a标签的href属性
Link组件无法展示哪个link处于选中的效果

NavLink:

NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮,选中项默认自带active类名

to属性，用于指定地址，会渲染成a标签的href属性
activeClassName: 用于指定高亮的类名，默认active。一般不去修改。
exact: 精确匹配，表示必须地址栏和to的属性值 精确匹配类名才生效

路由三大对象之-Route

决定路由匹配规则

格式：<Route path="/xx/xx" component={组件}></Route>

匹配规则

名词约定：

path： Route组件中path属性的值
path的值: 指的如下格式
1. link组件中to的属性值
2. 地址栏中的地址

模糊匹配规则

只要pathname以path开头就算匹配成功
匹配成功就加载对应组件；
整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

模糊匹配和精确匹配

默认是模糊匹配的
补充exact可以设置成精确匹配

Switch

用Switch组件包裹多个Route组件。在Switch组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件

处理404页

思路：不设置path属性，将404页对应的路由放在switch内部的最后位置一般用作兜底

页面跳转 Redirect

页面跳转

格式

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

当匹配到"/"时自动匹配到 "/comment"

示例

import React from 'react'
import ReactDom from 'react-dom'
import { useHistory } from 'react-router'
import './04.css'
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from 'react-router-dom'
import Login from './pages/Login'
import Comment from './pages/Comment'
import Search from './pages/Search'
import Page404 from './Page404'
export default function App () {
  const history = useHistory()
  console.log(history)
  return (
    <div>
      <h1>react编程式导航</h1>
      <Router>
        <NavLink to="/login">登录</NavLink>
        <NavLink to="/comment">评论</NavLink>
        <NavLink to="/search">搜索</NavLink>
        <hr />
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/comment" component={Comment} />
          <Route path="/search" component={Search} />
          <Route component={Page404} /> //兜底
        </Switch>
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

编程式导航

编程式导航的格式

第一步

import {useHistory} from 'react-router'

第二步注册

const history = useHistory()

第三步使用与vue一般无二

 history.push('/find')

示例

import {useHistory} from 'react-router' 

export default function App() {
  const history = useHistory()
  
  history.push('/find')
  // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
  history.go(-1) 
  
  // 进入/frend，并替换记录  History中不会记录
  history.replace('/frend') 
  
}