Prop `history` được đánh dấu là bắt buộc trong` Router`, nhưng giá trị của nó là ʻundefined`. trong Bộ định tuyến

Tôi mới sử dụng ReactJs. Đây là mã của tôi:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

và biên dịch nó bằng webpack. Ngoài ra, tôi đã thêm Thành phần chính vào bí danh của mình. Bảng điều khiển ném ra những lỗi này: Tôi cũng đọc các liên kết sau:

React Router thất bại trong lịch sử hỗ trợ 'lịch sử', không được xác định

Làm cách nào để giải quyết lịch sử được đánh dấu là bắt buộc, khi giá trị không được xác định?

Nâng cấp React-Router và thay thế hashHistory bằng browserHistory

và nhiều tìm kiếm trên web, nhưng tôi không thể khắc phục sự cố này. React Router là phiên bản 4

Nếu bạn đang sử dụng react-router v4, bạn cũng cần cài đặt react-router-dom. Sau đó, nhập BrowserRouter từ react-router-dom và chuyển Router cho BrowserRouter. Có vẻ như v4 thay đổi một số thứ. Ngoài ra, tài liệu về bộ định tuyến phản ứng đã lỗi thời. Đây là mã làm việc của tôi:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';

ReactDOM.render((
     <BrowserRouter>
          <Route path="/" component={App}/>
     </BrowserRouter>
     ),
     document.getElementById('root')
);

Nguồn

Bạn đang sử dụng phiên bản React Router nào? Phiên bản bộ định tuyến 4 đã thay đổi từ việc truyền trong lớp browserHistory sang chuyển một phiên bản của browserHistory, hãy xem ví dụ mã trong tài liệu mới .

Điều này đã bắt rất nhiều người tự động nâng cấp; tài liệu di chuyển sẽ xuất hiện 'bất kỳ ngày nào bây giờ'.

Bạn muốn thêm cái này vào đầu:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

và

<Router history={newHistory}/>

Nếu bạn muốn có nhiều tuyến đường, bạn có thể sử dụng nút chuyển như thế này,

import {Switch} from 'react-router'; 

sau đó

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

Tôi gặp vấn đề tương tự trong ES6, nhưng khi tôi chuyển sang sử dụng thư viện 'react-router-dom', vấn đề đã được giải quyết. Đối với tất cả người hâm mộ của ES6, chúng tôi bắt đầu:

npm install --save react-router-dom

Trong index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

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

Phiên bản 4 của React Router đã thay đổi một số thứ. Họ đã tạo các phần tử bộ định tuyến cấp cao nhất riêng biệt cho các loại lịch sử khác nhau. Nếu bạn đang sử dụng phiên bản 4, bạn có thể thay thế <Router history={hashHistory}>bằng <HashRouter>hoặc <BrowserRouter>.
Để biết thêm chi tiết, hãy xem https://reacttraining.com/react-router/web/guides

Tôi cũng viết một thực hành Đăng nhập. Và cũng gặp câu hỏi tương tự như bạn. Sau một ngày đấu tranh, tôi thấy rằng chỉ this.props.history.push('/list/')có thể tạo ra nó thay vì kéo rất nhiều plugin. Nhân tiện, react-router-domphiên bản là ^4.2.2. Cảm ơn!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.push(path);
        }
    })
}

Phần dưới đây phù hợp với tôi với "react-router@^3.0.5":

package.json:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)