prop "history" ถูกทำเครื่องหมายว่าจำเป็นใน "Router" แต่ค่าของมันคือʻundefined " ในเราเตอร์

ฉันยังใหม่กับ ReactJs นี่คือรหัสของฉัน:

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'));

และรวบรวมด้วย webpack นอกจากนี้ฉันยังเพิ่มองค์ประกอบหลักในนามแฝงของฉัน คอนโซลแสดงข้อผิดพลาดเหล่านี้: ฉันอ่านลิงก์เหล่านี้ด้วย:

React Router ล้มเหลว prop 'history' ไม่ได้กำหนด

ฉันจะแก้ไขประวัติต้องทำเครื่องหมายอย่างไรเมื่อไม่ได้กำหนดค่า

การอัปเกรด React-Router และการแทนที่ hashHistory ด้วย browserHistory

และการค้นหามากมายในเว็บ แต่ฉันไม่สามารถแก้ไขปัญหานี้ได้ React Router คือเวอร์ชัน 4

หากคุณใช้ react-router v4 คุณต้องติดตั้ง react-router-dom ด้วย หลังจากนั้นให้นำเข้า BrowserRouter จาก react-router-dom และเปลี่ยน Router สำหรับ BrowserRouter ดูเหมือนว่า v4 จะมีการเปลี่ยนแปลงหลายอย่าง นอกจากนี้เอกสารการตอบกลับเราเตอร์ยังล้าสมัย นี่คือรหัสการทำงานของฉัน:

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')
);

ที่มา

คุณกำลังใช้ React Router เวอร์ชันใด รุ่น Router 4 เปลี่ยนจากการส่งผ่านในชั้น browserHistory จะผ่านตัวอย่างของ browserHistory ให้ดูตัวอย่างรหัสในเอกสารใหม่

สิ่งนี้ดึงดูดผู้คนจำนวนมากที่อัปเกรดโดยอัตโนมัติ เอกสารการย้ายข้อมูลจะออก "ทุกวัน"

คุณต้องการเพิ่มสิ่งนี้ที่ด้านบน:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

และ

<Router history={newHistory}/>

หากคุณต้องการมีหลายเส้นทางคุณสามารถใช้สวิตช์เช่นนี้

import {Switch} from 'react-router'; 

แล้ว

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

ฉันพบปัญหาเดียวกันใน ES6 แต่เมื่อฉันเปลี่ยนไปใช้ไลบรารี 'react-router-dom' ปัญหาได้รับการแก้ไข สำหรับแฟน ๆ ES6 ทุกคนไปเลย:

npm install --save react-router-dom

ใน index.js:

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

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

React Router เวอร์ชัน 4 มีการเปลี่ยนแปลงหลายอย่าง พวกเขาสร้างองค์ประกอบเราเตอร์ระดับบนสุดแยกกันสำหรับประวัติประเภทต่างๆ หากคุณกำลังใช้รุ่น 4 คุณควรจะสามารถที่จะเปลี่ยน<Router history={hashHistory}>ด้วยหรือ<HashRouter> ดูรายละเอียดเพิ่มเติมได้ที่https://reacttraining.com/react-router/web/guides<BrowserRouter>

ฉันเขียนแบบฝึกเข้าสู่ระบบด้วย และเจอคำถามเดียวกันกับคุณด้วย หลังจากต่อสู้มาทั้งวันฉันพบว่าthis.props.history.push('/list/')สามารถสร้างมันได้แทนที่จะดึงปลั๊กอินจำนวนมากเข้ามา โดยวิธีการที่รุ่นreact-router-dom ^4.2.2ขอบคุณ!

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);
        }
    })
}

ด้านล่างใช้ได้ผลสำหรับฉันกับ "react-router@^3.0.5":

package.json:

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

ดัชนี 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')
)