React-router TypeError: _this.props.이력이 정의되지 않았습니다.

React-router TypeError: _this.props.이력이 정의되지 않았습니다.

react js 및 i가 포함된 react-router를 사용하고 있지만 이 오류가 발생합니다.

컴파일 중에 에러가 표시됩니다.

TypeError: _this.props.history is undefined

이것은 나의 index.filename 파일입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>

    </Route>
  </Router>
  ,
  document.getElementById('root')
);

그리고 이것은 나의 App.js 파일입니다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;

이는 리액트라우터 4.0.0부터 상황이 바뀌었기 때문입니다.이제 를 사용해 주세요.BrowserRouter부터react-router-dom패키지 사용 중browserHistory코드는 다음과 같습니다.

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

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

물론 설치도 필요합니다.react-router-dom첫번째.

또, 2개 이상 사용하고 있는 경우는,Route요소를 사용하여Switch이 답변에서 설명한 바와 같이

나에게 해결책은 변화를 주는 것이었다.

1) 아동용 컴포넌트

<Route path="/path">
 <MyComponent/>
</Route>

로.

2) 컴포넌트를 '컴포넌트' 소품으로 사용

<Route path="/path" component={MyComponent}>
</Route>

어느 쪽이든 렌더링하기 때문에 매우 혼란스러웠습니다.예를 들어 첫 번째 예시와 같이 코드를 제공하고 있습니다.(현재는 react-router-dom 패키지의 버전 5.1.2를 사용하고 있습니다).

갱신하다

이 방법을 사용할 수도 있습니다("MyComponent"의 하위 구성 요소의 경우) 이 구성 요소만 작동합니다.

import {withRouter} from 'react-router-dom';

const componentClassWithHistory = withRouter(ChildComponent);
export {componentClassWithHistory as ChildComponent};

또는 디폴트 내보내기용

export default withRouter(ChildComponent)

또는 타이프 스크립트의 경우

const componentClassWithHistory = (withRouter(ChildComponent as any) as any);
export {componentClassWithHistory as ChildComponent};

출처 : https://reacttraining.com/react-router/core/api/withRouter

도움이 됐으면 좋겠는데

npm을 사용하고 있습니까?package.json의 "react-router"에도 같은 문제가 있었습니다.react-router: ^3.0.2로 변경하면 문제가 해결되었습니다.

양식 구성요소에 문제가 있습니다.

이.이.이.이.가.history.syslog/'는 정의되어 있지 않습니다.

이 문제를 해결하기 위해 추가했습니다.import {withRouter} from 'react-router-dom'그런 다음 기본 구성 요소를 다음과 같이 내보냅니다.export default withRouter(connect(mapStateToProps)(CustomForm));

import React from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import {withRouter} from 'react-router-dom'
import axios from "axios";

const FormItem = Form.Item;


class CustomForm extends React.Component {
  
  handleFormSubmit = async (event, requestType, articleID, ) => {
    event.preventDefault();

const postObj = {
  title: event.target.elements.title.value,
  content: event.target.elements.content.value
}

axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.headers = {
  "Content-Type": "application/json",
  Authorization: `Token ${this.props.token}`,
};

if (requestType === "post") {
  await axios.post("http://127.0.0.1:8000/api/create/", postObj)
    .then(res => {
      if (res.status === 201) {
        this.props.history.push(`/`);
      }
    })
} else if (requestType === "put") {
  await axios.put(`http://127.0.0.1:8000/api/${articleID}/update/`, postObj)
    .then(res => {
      if (res.status === 200) {
        this.props.history.push(`/`);
      }
    })
}


};

  render() {
    return (
      <div>
        <Form
          onSubmit={event =>
            this.handleFormSubmit(
              event,
              this.props.requestType,
              this.props.articleID
            )
          }
        >
          <FormItem label="Title">
            <Input name="title" placeholder="Put a title here" />
          </FormItem>
          <FormItem label="Content">
            <Input name="content" placeholder="Enter some content ..." />
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">
              {this.props.btnText}
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default withRouter(connect(mapStateToProps)(CustomForm));

이게 누군가에게 도움이 됐으면 좋겠어요.저는 장고를 백엔드로 사용하고 있습니다.

사용할 수 있습니다.window.location.href = '/somePath'최후의 수단으로서

내가 쓰려고 했는데history기능 컴포넌트에 접속하려고 했기 때문에 정의되지 않았습니다.props의사들에 따르면, 우리는 이 약을useHistoryhook을 사용하여 이력에 액세스합니다.여기 문서에 따른 샘플 코드가 있습니다.

import { useHistory } from "react-router-dom";
function HomeButton() {


 let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

자세한 내용은 이 링크를 참조하십시오.

내가 보기엔 이게 제안인 것 같아.렌더링하는 컴포넌트에 routeProps를 전달하지 않았기 때문에 이력은 정의되어 있지 않습니다.

루트를 다음과 같이 변경합니다.

 <Route path="/home" render={(routeProps) => <Home {...routeProps}/>} />

이 방법을 사용하여 렌더링된 구성요소로 다른 소품을 전달할 수도 있습니다.

이것으로 충분합니다>>>

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

'react-router'를 'react-router-dom'으로 변경하고 BrowserRouter를 Router로 변경합니다.

이렇게 >>>

import { BrowserRouter as Router, Route, browserHistory, IndexRoute } from 'react-router-dom';

이력에 액세스 할 수 있는 문제에 대처하기 위해서, 내장 라우터 중 하나를 사용하는 것이 아니라, 자신의 라우터를 인스턴스화하려고 했을 때에, 다음의 문제가 발생했습니다.

history.disclosing

import { createHashHistory as createHistory } from 'history'

export default createHistory()

root.syslogx

import { Router, Route } from 'react-router-dom'
import history from './history'

...

  <Router history={history}>
    <Route path="/test" component={Test}/>
  </Router>

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★history2로 있는 , 「v2.1.2」는 「v2.1.2」로 잠겨 있습니다.react-router합니다.history자の자 때문에, 라우터는, 「인스턴스화」를 인스턴스화 되었습니다.history때, 저는 있었어요.history호환되지 않는 오브젝트를 얻을 수 있습니다.

나는 다음과 같은 일이 있었다.

<Router>
   <HeaderComponent/>
   <Router exact path="/" component={Home}/>
   <Router path="/auth" component={AuthLayout}/>
   <FooterComponent/>
 </Router>

★★★★★★★★★★★★★★★★★」AuthLayout was in in was 를 전환하고 있던 입니다.SignIn ★★★★★★★★★★★★★★★★★」SignUp다음과 같이 합니다.

<div>
  { login ? <SignIn/> : <SignUp/> }
</div>

는 이 했다.this.props.history is not a function이 컴포넌트 안에 있습니다.그 컴포넌트를 라우터 내부에서 직접 사용하지 않았기 때문입니다.는 는는 to to to to에 접속했습니다.this.props.history내 the의 AuthLayout아이들에게 물려주어야 했어요

그래서 해냈다.

<div>
  { login ? <SignIn history={this.props.history}/> :  <SignUp history={this.props.history}/> }
</div>

문제가 해결되었습니다.

다음 솔루션은 ReactDOM.render에서 사용할 수 있습니다.

 <BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/user" component={User} />
    <Route path="*" component={page404} />
  </Switch>
 </BrowserRouter>

복수의 루팅을 사용합니다.

이 작업은 라우팅 대상 컴포넌트에서 수행해야 합니다.이 경우 App 컴포넌트입니다.따라서 App.js에서 "createBrowserHistory"를 가져와 다음과 같이 수행합니다.

import React, { Component } from 'react';
import './App.css';
import { createBrowserHistory } from "history";

class App extends Component {
    constructor(props){
        super(props);

        this.history = createBrowserHistory();;

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;

라우터에 링크하지 않은 컴포넌트 또는 컴포넌트 간에 필요하지 않은 링크가 있는지 확인합니다.

게다가 당신이<Router><Link>...</Link></Router>클릭 가능한 컴포넌트 중 하나로 인해 작업이 중단될 수 있습니다.

도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/42857283/react-router-typeerror-this-props-history-is-undefined