"Router"에서는 "history"라는 프로포트가 "required"로 표시되어 있지만, 그 값은 "undefined"입니다.

"Router"에서는 "history"라는 프로포트가 "required"로 표시되어 있지만, 그 값은 "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'));

웹 팩으로 컴파일합니다.또, 메인 컴포넌트를 에일리어스에 추가했습니다.콘솔이 다음 오류를 발생시킵니다.저도 다음 링크를 읽습니다.

응답 라우터 실패 프로펠러 'history'가 정의되지 않았습니다.

값이 정의되지 않은 경우 이력이 필수라고 표시된 경우 어떻게 해결합니까?

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

웹 검색도 많이 했지만 이 문제를 해결할 수 없었습니다.리액트 라우터는 버전4

react-router v4를 사용하는 경우 react-router-dom도 설치해야 합니다.그런 다음 react-router-dom에서 BrowserRouter를 Import하고 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')
);

원천

어떤 버전의 리액트 라우터를 사용하고 있습니까?라우터 버전4가 browserHistory 클래스 통과에서 browserHistory 인스턴스 통과로 변경되었습니다.새로운 문서의 코드 예를 참조하십시오.

이는 자동 업그레이드를 하는 많은 사용자를 대상으로 하고 있으며, 마이그레이션 문서는 '언제든지' 공개될 예정입니다.

이 항목을 맨 위에 추가합니다.

import { createBrowserHistory } from 'history'

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에서도 같은 문제가 발생했지만, 리액트-라우터-돔 라이브러리로 바꾸자 문제가 해결되었습니다.ES6의 모든 팬을 위해, 이하를 소개합니다.

npm install --save react-router-dom

in index.js:

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

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

리액트 라우터 버전4는 몇 가지 사항을 변경하였습니다.이들은 이력 유형별로 개별 최상위 라우터 요소를 만들었습니다.버전 4를 사용하는 경우,<Router history={hashHistory}>와 함께<HashRouter>또는<BrowserRouter>.
상세한 것에 대하여는, https://reacttraining.com/react-router/web/guides 를 참조해 주세요.

( year 2022 )버전 「react-router-dom」의 경우: 「^6.3.0」이 아직 문제가 있는 경우는, App.js 파일의 Import 순서를 확인해 주세요.

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

순서가 왜 중요한지 모르겠지만, 나에게는 효과가 있었다.

Import 시도 오류: 'Switch'가 'react-router-dom'에서 내보내지 않음

로그인 연습도 쓰고 있습니다.그리고 너처럼 똑같은 질문을 받아라.하루의 투쟁 끝에, 나는 오직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」에서는, 이하와 같이 동작합니다.

패키지.json:

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

index.syslog:

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