React-Router - Uncaught TypeError: Không thể đọc thuộc tính 'lộ trình' không xác định

Question

Cố gắng sử dụng bộ định tuyến phản ứng v4 với redux và chạy vào lỗi này, dường như tuân theo tài liệu, không thể tìm thấy bất kỳ thông tin nào trên đó 'm thua lỗ:

Uncaught TypeError: Cannot read property 'route' of undefined

Dưới đây là mã của tôi:

import React, {Component} from 'react'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link, 
    withRouter 
} from 'react-router-dom' 
import Menu from './Menu'; 
import { connect } from "react-redux"; 
import Play from './Play'; 
class Manager extends Component { 
    render() { 
     return(
      <Router> 
       <div> 
        <Route exact path="/" component={Menu}/> 
        <Route path="/menu" component={Menu}/> 
        <Route path="/play" component={Play}/> 
       </div> 
       </Router> 
     ) 
    } 
} 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager)); 

và đây là toàn bộ lỗi:

game.js:26838 Uncaught TypeError: Cannot read property 'route' of undefined 
    at Route.computeMatch (game.js:26838) 
    at new Route (game.js:26815) 
    at game.js:15322 
    at measureLifeCyclePerf (game.js:15102) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (game.js:15321) 
    at ReactCompositeComponentWrapper._constructComponent (game.js:15307) 
    at ReactCompositeComponentWrapper.mountComponent (game.js:15215) 
    at Object.mountComponent (game.js:7823) 
    at ReactCompositeComponentWrapper.performInitialMount (game.js:15398) 
    at ReactCompositeComponentWrapper.mountComponent (game.js:15285) 

Answer 1

Bạn không cần phải sử dụng withRouter cao hơn Router thực tế của bạn là :) Chỉ cần loại bỏ nó:

export default connect(mapStateToProps, mapDispatchToProps)(Manager); 

Bạn sẽ cần phải sử dụng withRouter HOC, nếu bạn muốn truy cập thông tin lịch sử bên trong thành phần lồng trong Route . Bạn có thể tìm thấy chi tiết tại đây: https://reacttraining.com/react-router/web/api/withRouter

Answer 2

Vì vậy, tôi đã chạy nó khỏi máy chủ cục bộ của mình, khi tôi chạy nó khỏi máy chủ webpack, nó hoạt động.

Answer 3

tôi cố định này bằng cách di chuyển <Navigation /> bên trong thay đổi <Router></Router>

Answer 4

my my router của bạn với một router mới phản ứng 4,0 gọi là "phản ứng-router-dom"

sử dụng NPM/sợi cài đặt các mô-đun "phản ứng-router -dom ", xác định bộ định tuyến của bạn như vậy ..

đừng quên nhập. nhập {BrowserRouter, Route} từ 'react-router-dom';

  <BrowserRouter> 
       <div> 
       <Route exact path="/" component={Menu}/> 
       <Route path="/menu" component={Menu}/> 
       <Route path="/play" component={Play}/> 
       </div> 
      </BrowserRouter> 

Answer 5

Ở đây, bạn đang sử dụng phản ứng-bộ định tuyến-dom phiên bản mới nhất trên 4.0.0.

Vì vậy, không có Bộ định tuyến nào khả dụng. Bạn cần sử dụng BrowserRouter trong phiên bản này.

mã của bạn sẽ

import React, {Component} from 'react'; 
import { 
    Switch, 
Route, 
Link, 
withRouter 
} from 'react-router-dom' 
import Menu from './Menu'; 
import { connect } from "react-redux"; 
import Play from './Play'; 
class Manager extends Component { 
    render() { 
    return(<div> 
     <Switch> 

       <Route exact path="/" component={Menu}/> 
       <Route path="/menu" component={Menu}/> 
       <Route path="/play" component={Play}/> 

      </Switch></div> 
    ) 
} 
} 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager)); 

và sử dụng BrowserRouter trong tập tin index.js của bạn hiển thị phần này

import { BrowserRouter } from 'react-router-dom'; 
ReactDOM.render((<BrowserRouter><Manager/></BrowserRouter>), document.getElementById('root'));