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

React Router失败的道具“历史记录”,未定义

姬雪松
2023-03-14
问题内容

我一直在跟踪Tyler Mcginnis的教程,并用React
Router遇到了麻烦,尤其是历史记录。我最终逐字复制了他的代码只是为了看看是否只有我一个人,但我仍然

Warning: React.createElement: type is invalid -- expected a string (for built-
in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's 
defined in.

Warning: Failed prop type: The prop `history` is marked as required in 
`Router`, but its value is `undefined`. in Router

Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (index_bundle.js:8347)
at index_bundle.js:19079
at measureLifeCyclePerf (index_bundle.js:18859)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (index_bundle.js:19078)
at ReactCompositeComponentWrapper._constructComponent (index_bundle.js:19064)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:18972)
at Object.mountComponent (index_bundle.js:4070)
at ReactCompositeComponentWrapper.performInitialMount (index_bundle.js:19155)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:19042)
at Object.mountComponent (index_bundle.js:4070)

实现是:

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require("../components/Home");
var PromptContainer = require('../containers/PromptContainer');

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' header='Player One' component={PromptContainer} />
      <Route path='playerTwo/:playerOne' header='Player Two' component={PromptContainer} />
    </Route>
  </Router>
);

module.exports = routes;

我注意到的是模块hashHistory中不存在react- router,而是模块createBrowserHistory内部history。遵循找到的API文档,我认为必须通过以下位置调用它:

var BrowserHistory = require('history/createBrowserHistory);
const history = createBrowserHistory();

这样做会产生createBrowserHistory is not a function错误。删除括号,会导致与上述历史记录相同的错误undefined

当我记录历史记录时,绝对是不确定的,这使我相信问题与import语句有关,但是控制台不会告诉我ReactRouter.hashHistory找不到吗?

我知道本教程已经使用一年了,我可能还不知道对API所做的更改,这就是我的问题所在。任何帮助表示赞赏!


问题答案:

路由器v4有点不同

HashHistory

import { HashRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App';

render(( 
  <Router> 
    <Route exact path="/" component={App} /> 
  </Router> ), 
document.getElementById('root'));

要么 BrowserHistory

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App';

render(( 
  <Router> 
    <Route exact path="/" component={App} /> 
  </Router> ), 
document.getElementById('root'));


 类似资料:
  • 我使用一个VanillaChroncile临时存储和检索条目,除了有巨大的负载外,它工作得非常好。我得到地图失败异常。虽然我有处理此异常的恢复逻辑,但我想知道为什么首先会出现此异常。任何帮助都将不胜感激。 }

  • 读取播放历史信息 调用地址 http://api.bilibili.cn/history 返回 返回值字段 字段类型 字段说明 results int 返回的记录总数目 list object 返回数据 返回字段 “list” 子项 返回值字段 字段类型 字段说明 aid int 视频编号 typeid int 视频分类ID typename string 视频分类名称 title string

  • 历史记录 控制台维护 Elasticsearch 成功执行的最后500个请求列表。点击窗口右上角的时钟图标即可查看历史记录。这个图标会打开历史记录面板,您可以在其中查看历史请求。您也可以在这里选择一个请求,它将被添加到编辑器中当前光标所在的位置。 图 9. 历史记录面板

  • 3.3.1.1. 同步的文件历史记录 微力同步记录对文件的添加,修改、删除的操作记录,通过历史记录列表可查看时间时间及发生设备,如下: 事件时间,显示添加、修改、删除等操作发生的时间; 文件时间,显示该文件的最后修改时间; 操作类型,显示此次针对该文件所进行的操作的类型; 发生设备,显示进行此操作的设备名称; 目录,显示该文件所属同步目录; 清空历史记录,点击后可清除所有记录,此操作仅清除记录而已

  • 入口: 在路线规划右上角,有历史记录入口,无论“单路线规划”、“多路线规划”的结果,都会自动进行记录,点击进入该界面 在“路线规划”模块下展开二级模块“历史记录”,可以点击进入 历史记录列表 支持按照时间搜索记录 支持单个删除记录 支持一键删除全部记录 支持点击查看规划历史详情 历史详情 记录规划人、规划时间、规划结果 结果详情界面回放、支持点击查看

  • 我正在使用“< code>fancy box”,并试图将我的url更改为< br > fancy box 的url,因此我尝试使用< code>History.pushState()。< br >但它会导致错误< br >错误: 我会搜索它,但没有找到答案,请帮助我 或为我提供更好的解决方案 (我发现:Javascript history.PushState不起作用?但从答案中我不明白我的代码有什