首页
学习
活动
专区
工具
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.x中JS路由跳转

    在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后台管理系统路由方案及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

    74620

    react-router 的使用与优化

    在 Route 组件中除了使用 component 指定一个组件外,还可以使用 render 函数,这个函数返回一个 React 组件,表示路由要渲染的内容: 的用户页面。在 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-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 应用程序的核心”。

    50010

    从零手写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 路由跳转

    某些定义的理解 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

    16450

    深入浅出解析React Router 源码

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

    3K10

    创建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()

    61240

    前端模块化开发--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.5K50

    从零手写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+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 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路由

    学习一点简单的前端还是有很多好处的,除了能让你头疼还能让你再也不想碰这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()

    69040
    领券