React-Router v4:无法读取未定义的属性“路由" [英] React-Router v4: Cannot read property 'route' of undefined

问题描述

我想在点击按钮时重定向，所以我使用了 withRouter 来访问历史道具.

但我收到错误:

未捕获的类型错误:无法读取未定义的属性路由"在 Route.computeMatch (react-router.js:1160)

当我用 withRouter HOC 包装我的组件时出错.如果我删除 withRouter 函数，它就可以工作.

我的代码如下所示:

class App 扩展组件 {//...一些不相关的函数handleTitleTouchTap = e =>{e.preventDefault()const { 历史} = this.propshistory.push('/')}使成为() {//...其他组件<路由器><div><开关><Route exact={true} path="/" component={Home}/><Route path="/search" component={Search}/><Route path="/gamelist/:listId" component={GameListDetail}/><Route path="/game/:gameId" component={GameDetail}/><Route path="/manageuser" component={ManageUser}/><Route path="/addgamelist" component={AddGameList}/><Route path="/addgame" component={AddGame}/><Route path="/test" component={Test}/><路由组件={NoMatch}/></开关><LoginForm isLoginFormOpen={isLoginFormOpen} closeLoginForm={closeLoginForm} handleLogin={handleLogin}/><RegisterForm isRegisterFormOpen={isRegisterFormOpen} closeRegisterForm={closeRegisterForm} register={register}/>

</路由器>)}const mapStateToProps = state =>({//一些道具})const mapDispatchToProps = dispatch =>({//一些函数})const Container = connect(mapStateToProps, mapDispatchToProps)(App)导出默认 withRouter(Container)

解决方案

我遇到了同样的问题，我解决了将包裹的组件封装在 Router 组件(即 BrowserRouter).

在你的例子中，它会变成:

//假设这个文件是Container.js导出默认 withRouter(Container)//index.js从'./Container'导入容器使成为(<浏览器路由器><容器/></BrowserRouter>,document.getElementById('root'))

此处文档中的工作示例:https://codepen.io/pietro909/pen/RVWmwZ

我还在 repo 上打开了一个问题，因为我认为文档中的示例不够清楚 https://github.com/ReactTraining/react-router/issues/4994.

I want to redirect when I hit a button, so I used the withRouter to get the access to the history props.

But I get the error:

Uncaught TypeError: Cannot read property 'route' of undefined
  at Route.computeMatch (react-router.js:1160)

error when I wrap my component with the withRouter HOC. If I remove withRouter function, it just works.

My code looks like the following:

class App extends Component {

// ...some unrelated functions

handleTitleTouchTap = e => {
    e.preventDefault()
    const { history } = this.props
    history.push('/')
}

render() {
                //...other components
        <Router>
            <div>      
                <Switch>
                    <Route exact={true} path="/" component={Home} />
                    <Route path="/search" component={Search}/>
                    <Route path="/gamelist/:listId" component={GameListDetail}/>
                    <Route path="/game/:gameId" component={GameDetail}/>
                    <Route path="/manageuser" component={ManageUser} />
                    <Route path="/addgamelist" component={AddGameList} />
                    <Route path="/addgame" component={AddGame} />
                    <Route path="/test" component={Test} />
                    <Route component={NoMatch} />
                </Switch>
                <LoginForm isLoginFormOpen={isLoginFormOpen} closeLoginForm={closeLoginForm} handleLogin={handleLogin}/>
                <RegisterForm isRegisterFormOpen={isRegisterFormOpen} closeRegisterForm={closeRegisterForm} register={register}/>
            </div>
        </Router>
    )
}


const mapStateToProps = state => ({
    //some props
})
const mapDispatchToProps = dispatch => ({
    //some functions
})
const Container = connect(mapStateToProps, mapDispatchToProps)(App)

export default withRouter(Container)

解决方案

I've got the same issue and I solved it enclosing the wrapped component in a Router component (namely BrowserRouter).

In your example, it would become:

// assuming this file is Container.js
export default withRouter(Container)


// index.js
import Container from './Container'

render(
    <BrowserRouter>
        <Container/>
    </BrowserRouter>,
    document.getElementById('root')
 )

Working example from the docs here: https://codepen.io/pietro909/pen/RVWmwZ

I also opened an issue on the repo because the example from the docs is not clear enough in my opinion https://github.com/ReactTraining/react-router/issues/4994.

这篇关于React-Router v4:无法读取未定义的属性“路由"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！