当前位置: 首页 > 面试题库 >

React-Router的历史对象问题

澹台承载
2023-03-14
问题内容

我正在使用React和React Router构建一个非常简单的网页。我已经使用NPM安装了最新版本的React
Router模块(v3.0.0),并在index.js文件中写了3条非常简单的路由:

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Router, Route} from 'react-router';
//Import custom components
import About from '../components/about.js';
import Contact from '../components/contact.js';
import Sidebar from '../components/sidebar.js';
import Imagelist from '../components/image-list.js';


  render(
      <Router>
        <Route component={Sidebar}>
          <Route path="/" component={Imagelist}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </Route>
      </Router>,
      document.getElementById('content')
    );

但是,当我尝试在本地打开页面时,控制台中不断出现此错误:

未捕获的TypeError:无法读取未定义的属性’getCurrentLocation’(…)

当我检查错误时,此行在Router.js中突出显示:

您提供了使用历史记录v2.x或更早版本创建的历史记录对象。此版本的React Router仅与v3历史记录对象兼容。请升级到历史记录v3.x。

我尝试使用NPM安装此历史记录模块的v3,但仍收到此错误。我什至不确定那是否是错误要我做的事情。谁能告诉我我做对了吗?


问题答案:

这可能是react-router
3.0的一个错误,因为我没有找到任何地方说它需要通过historydocs。但是,您只需要将“历史记录”选项之一传递给即可Router。我什至看过一个示例,但都没有在docs中传递历史记录,这可能已经过时了。

基本上,您需要做的是:

import {Router, Route, browserHistory} from 'react-router';
...
return (
  <Router history={browserHistory}>
    <Route component={Sidebar}>
      <Route path="/" component={Imagelist}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
);
...

在此处查看更多详细信息https://github.com/ReactTraining/react-
router/blob/master/docs/guides/Histories.md



 类似资料:
  • 本文向大家介绍React-Router怎么获取历史对象?相关面试题,主要包含被问及React-Router怎么获取历史对象?时的应答技巧和注意事项,需要的朋友参考一下 1.如果React >= 16.8 时可以使用 React Router中提供的Hooks 2.使用this.props.history获取历史对象

  • 问题内容: 我从React-Router v3迁移到v4时遇到一些小问题。在v3中,我可以在任何地方执行此操作: 如何在v4中实现这一目标。 我知道当您在Component中时,可以使用hoc ,react上下文或事件路由器props。但对我而言并非如此。 我正在寻找v4中的NavigatingOutsideOfComponents的等效项 问题答案: 您只需要有一个导出对象的模块。然后,您将在整

  • 问题内容: 我一直在跟踪Tyler Mcginnis的教程,并用React Router遇到了麻烦,尤其是历史记录。我最终逐字复制了他的代码只是为了看看是否只有我一个人,但我仍然 实现是: 我注意到的是模块中不存在,而是模块内部。遵循找到的API文档,我认为必须通过以下位置调用它: 这样做会产生错误。删除括号,会导致与上述历史记录相同的错误。 当我记录历史记录时,绝对是不确定的,这使我相信问题与i

  • 问题内容: 在当前版本的React Router(v3)中,我可以接受服务器响应并用于转到相应的响应页面。但是,这在v4中不可用,我不确定哪种适当的处理方式。 在此示例中,使用Redux,当用户提交表单时, components / app-product-form.js 调用。服务器返回成功后,该用户将被带到“购物车”页面。 如何从React Router v4的功能重定向到购物车页面? 问题答

  • 问题内容: 谁能告诉我如何返回上一页而不是特定路线? 使用此代码时: 收到 此错误, 因为没有路由器历史记录 , 所以goBack()被忽略了 这是我的路线: 问题答案: 我想你只需要通过intializing它就像你的路由器上启用BrowserHistory: 。 在此之前,您应该需要从 希望对您有所帮助! UPDATE:ES6中的示例

  • 所以基本上,当我尝试从其中一个路由更改路由时,我调用this.props.history.push('/newPath')。浏览器url的变化,但是新的路径没有得到匹配(我假设),因为渲染功能的相同组件被调用,没有什么变化。. 指数带路由器的tsx: 我尝试从中导航的组件使用connect函数连接到redux存储。我曾尝试将其包装到withRouter()HOC中并删除连接,但没有成功。我正在调用

  • 我遇到一个问题,React路由器无法使用hook获取参数。当转到路由时,(浏览器路径包括basename),控制台.log()在这里记录一个空对象,,它应该在这里显示例如 看看这个例子https://reacttraining.com/react-router/web/api/Hooks/useparams 这应该行得通。