prop`history`는`Router`에서 필수로 표시되지만 그 값은`undefined`입니다.

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

웹팩으로 컴파일합니다. 또한 별칭에 Main 구성 요소를 추가했습니다. 콘솔에서 다음 오류가 발생합니다. 다음 링크도 읽었습니다.

React Router 실패한 prop '히스토리', 정의되지 않음

값이 정의되지 않은 경우 기록을 필수로 표시하려면 어떻게해야합니까?

React-Router를 업그레이드하고 hashHistory를 browserHistory로 대체

웹 검색이 많았지 만이 문제를 해결할 수 없었습니다. React Router는 버전 4입니다.

---

react-router v4를 사용하는 경우 react-router-dom도 설치해야합니다. 그 후 react-router-dom에서 BrowserRouter를 가져오고 Router를 BrowserRouter로 전환합니다. v4가 여러 가지를 변경 한 것 같습니다. 또한 react-router 문서는 오래되었습니다. 이것은 내 작업 코드입니다.

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를 사용하고 있습니까? 라우터 버전 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')
);

---

Version 4 of React Router changed several things. They made separate top level router elements for the different history types. If you're using version 4 you should be able to replace <Router history={hashHistory}> with <HashRouter> or <BrowserRouter>.
For more detail, see https://reacttraining.com/react-router/web/guides

---

I also write a Login practice. And also meet the same question like you. After a day struggle, I found that only this.props.history.push('/list/') can make it instead of pulling in a lot of plugins. By the way, the react-router-dom version is ^4.2.2. Thanks!

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

---

The below works for me with "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')
)

참고URL : https://stackoverflow.com/questions/43008036/the-prop-history-is-marked-as-required-in-router-but-its-value-is-undefine