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

React-Router无法读取未定义的属性字符串

於和志
2023-03-14
问题内容

我是React的新手,正在使用React,Redux和React
Router构建我的第一个应用程序,到目前为止,我已经成功设置了样板,但是当我想使用React-Router并创建路由时,出现以下错误

TypeError: Cannot read property 'string' of undefined
./node_modules/react-router-dom/es/BrowserRouter.js
node_modules/react-router-dom/es/BrowserRouter.js:38
  35 | }(React.Component);
  36 | 
  37 | BrowserRouter.propTypes = {
> 38 |   basename: PropTypes.string,
  39 |   forceRefresh: PropTypes.bool,
  40 |   getUserConfirmation: PropTypes.func,
  41 |   keyLength: PropTypes.number,

这仅在我尝试导入和使用时发生

import { BrowserRouter, Route } from 'react-router-dom';

这是我的index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store'

import { BrowserRouter, Route } from 'react-router-dom';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

class Hello extends Component {
  render(){
    return(
      <div>Hello</div>
    )
  }
}


class GoodBye extends Component {
  render(){
    return(
      <div>GoodBye</div>
    )
  }
}

ReactDOM.render(<Provider store={store}>
  <BrowserRouter>
    <Route path="/hello" component={Hello}/>
    <Route path="/goodbye" component={GoodBye}/>
  </BrowserRouter>
  </Provider>, document.getElementById('root'));
registerServiceWorker();

还有我的package.json

{
  "name": "reactreduxrouterblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.0.0-rc5",
    "react-router-dom": "^4.0.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

任何知识都将受到欢迎,谢谢!


问题答案:

尝试将PropTypes包添加到您的应用中。

basename: PropTypes.string

看来您只是缺少那个包裹。

编辑:

确保运行npm install以安装所有依赖项。



 类似资料:
  • 问题内容: 我是新来的反应和反应路由器。 react的问题在于,在我的应用程序的某些页面上,react-router正在运行,并且出现一些类似的错误:“无法读取未定义的属性’push’”。 我正在使用反应0.14.1 我的路由代码如下所示: 我的组件现在是这样的: 谁能帮我这个?谢谢。 问题答案: 您的应用程序中没有提供支持的Router实例。 我假设您要导入withRouter以获取Router

  • 请注意,我在react ProductScreen.js中呈现动态数据时有问题 注意,...数据在product.js中呈现得很好,但相同的数据在productscreen.js中不会呈现,因为productscreen.js链接是通过“id”呈现的。 谢谢app.js 导入“./homescreen.css”;从'../Components/Product'导入产品从'React'导入{useE

  • 问题内容: 我有一个带有旋转幻灯片的 仪表板 ,每个幻灯片在 Bldgs中 都有一个对应的选项卡。两者并有孩子我。 当用户单击特定的幻灯片时,需要告诉以便告诉它在路由到时显示选项卡。 我 相信 ,我从传递正确的索引值达到和向下。但是,我的文件中抛出一个错误,指出: 在我开始将函数传递给组件之前,我的代码运行良好。 Index.js App.js Dashboard.js Bldgs.js 问题答案

  • 我相信我将正确的索引值从传递到,再传递到。但是,在我的文件中抛出一个错误,该错误声明: 在开始将函数传递给组件之前,我的代码运行良好。 dashboard.js Bldgs.JS

  • 通常,当我单击子组件中的菜单项时,它会调用{this.handlesort},这是一个本地函数。句柄排序从父组件接收onReorder道具。{onReorder}调用名为reOrder的本地函数。它设置{orderBy and orderDir}的状态。问题是,当我单击{menuitem}时,它立即返回此错误。(未捕获的TypeError:无法读取未定义的属性“onReOrder”)。通常,当我不