[reactjs] prop`history`는`Router`에서 필수로 표시되지만 그 값은`undefined`입니다. 라우터에서

Program / 글쓴이

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

답변

React Router 버전 4는 몇 가지 사항을 변경했습니다. 그들은 다른 히스토리 유형에 대해 별도의 최상위 라우터 요소를 만들었습니다. 당신은 버전 4를 사용하는 경우에는 교체 할 수 있어야한다 <Router history={hashHistory}>와 <HashRouter>나 <BrowserRouter>.
자세한 내용은 https://reacttraining.com/react-router/web/guides를 참조 하십시오.

답변

나는 또한 로그인 연습을 작성합니다. 또한 당신과 같은 질문을 만나십시오. 하루의 고투 끝에 나는 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"

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