我有一个基本的短信应用程序,我想在每次页面路径名更改时检查它并执行一个功能。 到目前为止,我的组件工作正常,只是当我开始组织代码并开始使用withRouter时,出现了这样的错误:

 Uncaught TypeError: Cannot read property 'route' of undefined

如果删除withRouter,则运行isUserAuthenticated函数可以正常工作。 我该怎么做才能更改代码,使其与Router一起使用,同时提供与之相同的功能。 现在,它返回的错误只是一个空白页面,没有任何组件呈现到屏幕上

routes.js

import { BrowserRouter, Route, Switch, withRouter} from 'react-router-dom'
import React from "react";
import { Meteor } from "meteor/meteor";

import App from "./../ui/App";
import NotFound from "./../ui/NotFound";
import Signup from "./../ui/Signup";
import Login from "./../ui/Login";

class Routes extends React.Component{
    constructor(props){
        super(props)
    }
    isUserAuthenticated(){
        let isAuthenticated = !!Meteor.userId();
        console.log(this.props.history)
        if(isAuthenticated){

        }
    }
    render(){
        return(
            <BrowserRouter>
                <Switch>
                    <App path="/chat" texts={this.props.texts} render={this.isUserAuthenticated()}/>
                    <Signup path="/signup" render={this.isUserAuthenticated()}/>
                    <Login path="/" render={this.isUserAuthenticated()}/>
                    <Route path="*" component={NotFound}/>
                </Switch>
            </BrowserRouter>
        )
    }
}
export default withRouter(Routes)

我读过某个地方,在构造函数中使用super(props)将解决此问题(我从一开始就对此表示怀疑),但它仍然给了我同样的错误。

  ask by Stuart Fong translate from so

本文未有回复,本站智能推荐:

1回复

如何使用React的Routerv4history.push()[复制]

这个问题在这里已有答案: 以编程方式在React-Router v4 4答案中 导航 注意:我对React和Meteor相当新,所以在回答我的问题时请非常具体。 我正在尝试使用meteor创建一个短信应用程序并做出反应,但是,我使用的教程是使用React v3,我想知道如何
5回复

React-Router-未捕获的TypeError:无法读取未定义的属性“route”

尝试将React Router v4与Redux一起使用并遇到此错误,似乎是在遵循文档,找不到关于它的任何信息,所以我很茫然: 未捕获的TypeError:无法读取未定义的属性“ route” 这是我的代码: 这是完整的错误:
2回复

类型错误:无法读取未定义的属性“历史”

当 /logout 路由被命中时,我试图将用户重定向到登录页面。 身份验证正在工作(删除了 jwt 令牌,但应用程序无法重定向到 /login。 另外,如果我这样做/应用程序也会崩溃。 在登录路由上,我使用 react-router-dom 包中的this.props.history.push('/
1回复

错误为:TypeError:无法读取未定义的属性“位置”

以下是App.js的代码片段,其中包括Navigator组件: 我的导航组件如下所示。 它获取位置作为属性: 以下是Invoice.js中的代码 我收到错误消息: "TypeError: Cannot read property 'location' of undefined"
1回复

如何将道具传递到通过connect()传递的组件的数量?(未捕获的TypeError:无法读取未定义的属性“子级”)

操作系统:Windows 10 Pro 反应路由器:4.1.1 反应:15.5.4 如何将道具传递到组件的<Route>中,这些道具是通过connect()传递给组件的? app.js class MainApp extends React.Component
5回复

ReactRouter-无法读取未定义的属性“历史”

我正在构建一个样式指南应用程序。 我有两个下拉组件,用户可以在其中选择品牌和组件 - 然后应用程序将根据所选品牌显示所选组件。 我希望这两个选项都包含在 URL 中。 以编程方式更改路线的两个下拉列表。 每当用户与任一下拉菜单交互时,我都会收到错误 TypeError:无法读取未定义的属性“历史记录
1回复

TypeError:无法读取未定义的属性“postId”(无法再访问this.props.params)

操作系统:Windows 10 Pro 反应路由器:4.1.1 反应:15.5.4 因此,我正在从react-router v2迁移到v4,并且遇到上述参数的问题,因为缺少该参数。 当view/:postId (/view/0)的路由匹配时发生错误,但是呈现的组件未检测到this
2回复

反应。你不应该使用外面

我试图在 React 中实现一个 withRouter,所以我像这样导入了它 然后在最后一行我写了以下内容 但我收到一个错误 You should not use <withRouter(App) /> outside a <Router> 我试图在我的 app.js 中实现