React Router v6 学习笔记01

最新推荐文章于 2023-02-07 16:12:47 发布

叁灬拾

最新推荐文章于 2023-02-07 16:12:47 发布

阅读量167

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/Mufeng30/article/details/128525236

版权

基础知识点

1、React Router

react-router：路由核心库，包含诸多和路由功能相关的核心代码

react-router-dom：利用路由核心库，结合实际页面，实现跟路由密切相关的功能

如果是在页面中实现路由，需要安装react-router-dom

2、两种模式

路由：根据不同的页面地址，展示不同的组件

Hash Router哈希路由

根据url中的哈希值：#hashdata 来确定显示的组件

原因：hash的变化，不会导致页面的刷新

这种模式的兼容性最好

Borswer History Router 浏览器历史记录路由

根据页面路径来渲染组件

HTML5中新增了History APi 浏览器拥有了改变路径而不刷新页面的方式

Histoty表示浏览器历史记录栈

1、history.length:获取栈中的数据量

2、history.pushState：项当前历史记录栈中加一条新的记录

参数1：附加的数据，自定义数据，可以是如何数据

参数2：页面标题，目前大部分浏览器不支持

参数3：新的地址

3、history.replaceState：将当前指针指向的历史记录，替换为某个记录

3、路由组件

React-Router为我们提供了两个重要组件

Router组件

它本身不做任何展示，仅提供路由模式配置

该组件会产生一个上下文，上下文中会通过一些实用的对象和方法，供其他组件使用

1、HashRouter:该组件使用hash模匹配

2、BrowerRouter：该组件使用BrowserHistory模式匹配

通常情况下，Router组件只有，将该组件包括整个页面

import {HashRouter,BrowserRouter } from 'react-router-dom'
export default class App extends Component {
  render() {
    return (
      <BrowserRouter >
       这是一个新工程
      </BrowserRouter>
      // <HashRouter >
      //   这是一个新工程
      // </HashRouter>
    )
  }
}