react router v ^ 4.0.0 Uncaught TypeError: Không thể đọc thuộc tính 'location' của undefined

Question 1

Tôi đang gặp sự cố với bộ định tuyến phản ứng (tôi đang sử dụng phiên bản ^ 4.0.0).

đây là index.js của tôi

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';


ReactDOM.render(
  <Router history={browserHistory} >
    <Route path="/" component={App} />

  </Router>,
  document.getElementById('root')
);

App.js chỉ là bất cứ thứ gì. Tôi đang đăng cái cơ bản ở đây, vì nó không phải là vấn đề (tôi tin)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

và đây là những gì sẽ xảy ra khi tôi kiểm tra nhật ký bảng điều khiển

Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (Router.js:43)
    at ReactCompositeComponent.js:295
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

ồ, và đây là package.json đề phòng

{
  "name": "teste2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.0.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Tôi đã kiểm tra vấn đề này ở những nơi khác, nhưng tôi không tìm ra cách giải quyết nó.

Cảm ơn các bạn rất nhiều vì đã kiên nhẫn và giúp đỡ !!

Question 2

Bạn đang làm sai một số điều.

Đầu tiên, browserHistory không phải là một thứ trong V4, vì vậy bạn có thể xóa nó.
Thứ hai, bạn phải nhập mọi thứ từ react-routerđó react-router-dom.
Thứ ba, react-router-domkhông xuất a Router, thay vào đó, nó xuất a BrowserRouterđể bạn cần import { BrowserRouter as Router } from 'react-router-dom.

Có vẻ như bạn vừa sử dụng ứng dụng V3 của mình và mong đợi nó hoạt động với v4, đây không phải là một ý tưởng tuyệt vời.

Question 3

Tôi đã thử mọi thứ được đề xuất ở đây nhưng không hiệu quả với tôi. Vì vậy, trong trường hợp tôi có thể giúp bất kỳ ai gặp vấn đề tương tự, mọi hướng dẫn tôi đã kiểm tra đều không được cập nhật để hoạt động với phiên bản 4.

Đây là những gì tôi đã làm để làm cho nó hoạt động

import React from 'react';
import App from './App';

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


 ReactDOM.render((
        <HashRouter>
            <div>
                <Route path="/" render={()=><App items={temasArray}/>}/>
            </div>
        </HashRouter >
    ), document.getElementById('root'));

Đó là cách duy nhất tôi quản lý để làm cho nó hoạt động mà không có bất kỳ lỗi hoặc cảnh báo nào.

Trong trường hợp bạn muốn chuyển các đạo cụ cho thành phần của mình cho tôi, cách dễ nhất là:

 <Route path="/" render={()=><App items={temasArray}/>}/>

Question 4

Thay thế

import { Router, Route, Link, browserHistory } from 'react-router';

Với

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

Nó sẽ bắt đầu hoạt động. Đó là vì react-router-dom xuất BrowserRouter