首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React路由器DOM的历史记录导入中未定义createBrowserHistory

在React路由器中,createBrowserHistory是一个用于创建浏览器历史记录对象的函数。它是React Router库的一部分,用于管理应用程序的导航和历史记录。

当出现"在React路由器DOM的历史记录导入中未定义createBrowserHistory"的错误时,通常是因为没有正确导入createBrowserHistory函数或者使用了过时的版本。

要解决这个问题,首先确保已经正确导入createBrowserHistory函数。在最新版本的React Router中,可以使用以下方式导入:

代码语言:txt
复制
import { createBrowserHistory } from 'history';

然后,使用createBrowserHistory函数创建一个浏览器历史记录对象,并将其传递给React Router的Router组件:

代码语言:txt
复制
const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    {/* 路由配置 */}
  </Router>,
  document.getElementById('root')
);

这样就可以在React应用中使用浏览器历史记录对象了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 入门学习(十)-- React 路由

大家好,我是小丞同学,一名大二前端爱好者 这篇文章是学习 React React 路由学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 引言 我们之前写页面当中...路由原理 前端路由主要依靠时 history ,也就是浏览器历史记录 history 是 BOM 对象下一个属性, H5 中新增了一些操作 history API 浏览器历史记录就类似于一个栈数据结构...,前进就相当于入栈,后退就相当于出栈 并且历史记录上可以采用 listen 来监听请求路由改变,从而判断是否改变路径 H5 中新增了 createBrowserHistory API ,用于创建一个...路由基本使用 react-router-dom 理解和使用 专门给 web 人员使用库 一个 react 仓库 很常用,基本是每个应用都会使用这个库 专门来实现 SPA 应用 首先我们要明确好页面的布局...,如果我们 Link 和 Route 中分别用路由器管理,那这样是实现不了,只有一个路由器管理下才能进行页面的跳转工作。

1.7K10

React 入门学习(十)-- React 路由

大家好,我是小丞同学,一名大二前端爱好者 这篇文章是学习 React React 路由学习笔记 非常感谢你阅读,不对地方欢迎指正 愿你忠于自己,热爱生活 引言 我们之前写页面当中...路由原理 前端路由主要依靠时 history ,也就是浏览器历史记录 history 是 BOM 对象下一个属性, H5 中新增了一些操作 history API 浏览器历史记录就类似于一个栈数据结构...,前进就相当于入栈,后退就相当于出栈 并且历史记录上可以采用 listen 来监听请求路由改变,从而判断是否改变路径 H5 中新增了 createBrowserHistory API ,用于创建一个...路由基本使用 react-router-dom 理解和使用 专门给 web 人员使用库 一个 react 仓库 很常用,基本是每个应用都会使用这个库 专门来实现 SPA 应用 首先我们要明确好页面的布局...,如果我们 Link 和 Route 中分别用路由器管理,那这样是实现不了,只有一个路由器管理下才能进行页面的跳转工作。

1.9K10
  • 前端路由Router原理

    在前端开发,我 们可以使⽤路由设置访问路径,并根据路径与组件映射关系切换组件显示,⽽这整个过程都是同 ⼀个⻚⾯实现,不涉及⻚⾯间跳转,这也就是我们常说单⻚应⽤(spa)。...在前端开发 ,我们可以使⽤路由设置访问路径,并根据路径与组件映射关系切换组件显示,⽽这整个过程都 是同⼀个⻚⾯实现,不涉及⻚⾯间跳转,这也就是我们常说单⻚应⽤(spa)。...react-router 提供最基本路由功能,实际使用时候我们不会直接安装 react-router,而是根据应用运行环境选择安装 react-router-dom浏览器中使用)或 react-router-native...MemoryRouter 把 URL 历史记录保存在内存 (不读取、不写入地址栏)。测试和非浏览器环境很有用,如 React Native。...基本使用 react-router 奉行一切皆组件思想,路由器-「Router」、链接-「Link」、路由-「Route」、独占-「Switch」、重定向-「Redirect」都以组件形式存在 import

    2.7K20

    react学习笔记之react-router4.xJS路由跳转

    react开发单页应用时候,有时我们需要通过js触发路由跳转而不是紧紧通过Link组件链接跳转。...针对上面的两种情况,就有两种路由跳转场景,第一种:中间中触发路由跳转,第二种:非Component组件js触发路由跳转,这两种场景跳转方法分别为: 一,组件跳转到另一个路由组件: 从react-router-dom...中导入withRouter方法 import { withRouter } from 'react-router-dom'; 使用withRouter方法加工需要触发路由跳转组件 export default...this.props.history.push('/home'); 二,非组件JS函数触发路由跳转 从history中导入createHashHistory方法(如果您react应用使用是history...路由则导入createBrowserHistory) import { createHashHistory } from 'history'; // 如果是hash路由 import { createBrowserHistory

    1.1K10

    react-router 使用与优化

    Route 组件除了使用 component 指定一个组件外,还可以使用 render 函数,这个函数返回一个 React 组件,表示路由要渲染内容: <Route exact path="/"...当我们访问 /user/123456 时就可以跳转到 ID 为 123456 用户页面。 react-router 可以通过 props.match.params 获取到传入参数值。...而如果要在 Other 组件也想获得路由信息,可以这么做: import React from "react"; import { withRouter } from "react-router-dom...静态服务器环境,无法直接更改应用程序状态。在这种情况下,可以 context 特性中标记要渲染结果。如果出现了 context.url,就说明应用程序需要重定向。... ES 标准,有一个 import 异步加载模块语法,可以做到这一点。只是使用时需要下载有关包,因为不兼容。 create-react-app 已经集成了这一功能。

    3.2K10

    react后台管理系统路由方案及react-router原理解析

    react-router依赖基础—history,history是一个独立第三方js库,可以用来兼容不同浏览器、不同环境下对历史记录管理,拥有统一API。...,在内存中进行历史记录存储 执行URL前进 createBrowserHistory: pushState、replaceState createHashHistory: location.hash=...*** location.replace() createMemoryHistory: 在内存中进行历史记录存储 执行URL回退 createBrowserHistory: popstate createHashHistory...能够使组件更新根本原因,还是最后出发了setState函数;对于react-router,其实是对history原生对象封装,重新封装了push函数,使得我们push函数执行时候,可以触发在Router...组件组件装载之前,执行了history.listener函数,该函数主要作用就是给listeners数组添加监听函数,每次执行history.push时候,都会执行listenrs数组添加listener

    73820

    第二十一篇:从 React-Router 切入,系统学习前端路由解决方案

    请看下面代码(解析注释里): import React from "react"; // 引入 React-Router 相关组件 import { BrowserRouter as Router... React-Router ,各种细碎功能点有不少,但作为 React 框架前端路由解决方案,它最基本也是最核心能力,其实正是你刚刚所见到这一幕-路由跳转。这也是我们接下来讨论重点。...首先需要回顾下 Demo 第一行代码: import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 这行代码告诉我们...Link; 这 3 个组件也就代表了 React-Router 3 个核心角色: 1. 路由器,比如 BrowserRouter 和 HashRouter; 2....以上便是 3 个角色“打配合”过程。这其中,最需要你注意路由器这个角色,React Router 曾在说明文档官宣它是“React Router 应用程序核心”。

    44610

    React 路由跳转

    某些定义理解 react-router 理解 react 一个插件库 专门用来实现一个 SPA 应用 基于 react 项目基本都会用到此库 SPA 理解 单页 Web 应用(single page...web application,SPA) 整个应用只有一个完整页面 点击页面链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数据都需要通过 ajax 请求获取...管理浏览器会话历史(history)工具库 c. 包装是原生 BOM window.history 和 window.location.hash history API a....History.createBrowserHistory(): 得到封装 window.history 管理对象 b....(): 用一个新历史记录替换当前记录 e. history.goBack(): 回退到上一个历史记录 f. history.goForword(): 前进到下一个历史记录 g. history.listen

    15850

    深入浅出解析React Router 源码

    react-router 和  react-router-dom 文件夹。...所以我们希望中间加一层抽象,来屏蔽几种模式之间操作会话历史差别,而不是将这些差别和判断带进 React Router 代码。...一个 history 对象可以抽象出各种环境差异,并提供一个最小API,使您可以管理历史记录堆栈,导航和在会话之间保持状态。...此外在原生实现,我们还忽略了路由嵌套情况,我们其实只根节点绑定了监听事件,没有考虑子组件路由,而在 React Router ,通过context方式,将路由信息传递给其子孙组件...在当下这波前端技术滔滔浪潮,前端路由,也还会在前端er不断迭代, 继续摸索和前进, 更广阔场景上, 去发挥它价值。

    3K10

    从零手写react-router

    , 甚至native端有memory模式, 当模式不同时候, history会帮我们操作不同地方(比如hash模式下, 操作就是hash, browser模式下操作就是浏览器历史记录), 那么我们也知道...} from "history"; // 导入一个创建操作浏览器history api函数// 这个函数还可以接收一个配置对象, 你也可以不传// createBrowserHistory(config..., 我也只是输出了核心原理, 大家有想法可以自己补充聚合api我们知道 , 我们react-router引入代码都是直接在react-router-dom引入各种组件, 这个也不难我们具名导出一下就好...导入一个创建操作浏览器history api函数// 这个函数还可以接收一个配置对象, 你也可以不传// createBrowserHistory(config?)..., 我也只是输出了核心原理, 大家有想法可以自己补充聚合api我们知道 , 我们react-router引入代码都是直接在react-router-dom引入各种组件, 这个也不难我们具名导出一下就好

    3.1K30

    创建react路由

    学习一点简单前端还是有很多好处,除了能让你头疼还能让你再也不想碰这sb东西,但是程序员这种傻缺,总是喊 要走出舒适区 硬着头皮干吧 之前使用了react-cli脚手架创建了react项目,然后玩了一下...Ant Design of React 觉得还可以,UI组件库还挺好看,个人的话前端小白,后端还没玩明白就想玩一下前端,感觉还挺有意思 废话不多说了,学习一下react项目创建路由 对于react...路由创建,网上说法也有点多,有以下几种: 官方推荐安装react-router 百度到安装react-router-dom不需要安装react-router,因为二者为包含关系,安装前者即可 两者都安装.../page/about"; import {Router} from "react-router"; import { createBrowserHistory } from "history"; const...history = createBrowserHistory(); export default class Hello extends React.Component{ render()

    60940

    前端模块化开发--React框架(三):应用进阶(react-router4&&antd框架)

    GitHub地址 一、react-router4 1、react-router4理解 1) react一个插件库 2) 专门用来实现一个SPA应用 3) 基于react项目基本都会用到此库...2、SPA理解 1) 单页Web应用(single page web application,SPA 2) 整个应用只有一个完整页面 3) 点击页面链接不会刷新页面, 本身也不会向服务器发请求...forword() { //前进到下一个历史记录 history.goForward() } function replace (to) { //用一个新历史记录替换当前记录...如果不指定会下载最新5版本 npm install --save react-router-dom@4 javascript render() { return(... ) } 8、props里面的几个方法 javascript showDetailByPush = (id) => { //原来基础上添加

    1.2K10

    从零手写react-router

    将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex文档的话, 你会发现一个问题 // 我们react-router传递exact为精确匹配, 而在该库则是使用end..., 甚至native端有memory模式, 当模式不同时候, history会帮我们操作不同地方(比如hash模式下, 操作就是hash, browser模式下操作就是浏览器历史记录), 那么我们也知道...} from "history"; // 导入一个创建操作浏览器history api函数// 这个函数还可以接收一个配置对象, 你也可以不传// createBrowserHistory(config...我们Router逻辑如下: // 1...., 我也只是输出了核心原理, 大家有想法可以自己补充聚合api我们知道 , 我们react-router引入代码都是直接在react-router-dom引入各种组件, 这个也不难我们具名导出一下就好

    1.4K40

    从零手写react-router

    将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex文档的话, 你会发现一个问题 // 我们react-router传递exact为精确匹配, 而在该库则是使用end..., 甚至native端有memory模式, 当模式不同时候, history会帮我们操作不同地方(比如hash模式下, 操作就是hash, browser模式下操作就是浏览器历史记录), 那么我们也知道...} from "history"; // 导入一个创建操作浏览器history api函数// 这个函数还可以接收一个配置对象, 你也可以不传// createBrowserHistory(config...我们Router逻辑如下: // 1...., 我也只是输出了核心原理, 大家有想法可以自己补充聚合api我们知道 , 我们react-router引入代码都是直接在react-router-dom引入各种组件, 这个也不难我们具名导出一下就好

    1.5K50

    React Router v4教程:为你 React 应用创建路由

    React 路由 React Router v4 优点 常规路由 通常,当用户浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。...那么你认为这是怎样实现呢?程序添加路由器可以解决这一需求。 React 路由 这将把我们带到本文主题:React Router v4。...虽然他们谈话着眼点是围绕路由器 API 是如何“All About Components”React,只涉及单个 “Html” 文件。... React ,路由查看每个组件历史记录,当历史记录发生任何变化时,组件会重新渲染。 Router v4 之前,我们必须手动设置 History 值。...从 react-router-dom 库中导入 BrowserRouter 以及 Link 和 Route。 可以将 BrowserRouter 可视化为呈现子路径根组件。

    2K20

    React+TypeScript开发--环境搭建

    React+TypeScript开发--环境搭建 学习文档 React TypeScript 一、node环境安装 打开Node.js官网,它会自动识别所在环境,推荐你下载相应版本,左侧是持久支持稳定版本.../node @types/react @types/react-dom @types/jest 完成以上步骤后,创建一个新文件夹,终端cd到路径下,使用 TypeScript 启动新 Create...接下来,将任何文件重命名为 TypeScript 文件(例如 src/index.js 重命名为 src/index.tsx ) 三、开发工具 VSCode 四、运行项目 vscode打开项目后,...添加依赖: $ npm install --save react-router-dom App.tsx添加路由 import React from 'react' import { Router }.../routes' import { createBrowserHistory } from 'history'; export const history = createBrowserHistory

    2.5K10

    「源码解析 」这一次彻底弄懂react-router路由原理

    react-router可以理解为是react-router-dom核心,里面封装了Router,Route,Switch等核心组件,实现了从路由改变到组件更新核心功能,我们项目中只要一次性引入...react-router-dom,react-router核心基础上,添加了用于跳转Link组件,和histoy模式下BrowserRouter和hash模式下HashRouter组件等。...所谓BrowserRouter和HashRouter,也只不过用了history库createBrowserHistory和createHashHistory方法 react-router-dom 我们不多说了...这里我们参考history-4.7.2版本,最新版本api可能有些出入,但是原理都是一样解析history过程,我们重点关注setState ,push ,handlePopState,listen...使得我们可以页面组件props获取location ,match等信息。 4 Redirect-没有符合路由,那么重定向 重定向组件, 如果来路由匹配上,会重定向对应路由。

    4K40
    领券