Uncaughed TypeError: 정의되지 않은 속성(React-Router-Dom)을 읽을 수 없습니다.
회전 슬라이드가 있는 대시보드가 있으며, 각 대시보드에는 대응하는 탭이 Bldgs에 있습니다.둘다요.Dashboard.js ★★★★★★★★★★★★★★★★★」Bldgs.js 집에는 가 있다App.js.
가 클릭 시ADashboard.js,Dashboard 가 있다App.js 해서App할 수 있다Bldgs.js을 받다A 할 때 됩니다.Bldgs.
올바른 인덱스 값을 전달하고 있다고 생각합니다.Dashboard 지까지App 에 and and 。BldgsApp.js★★★★★★★★★★★★★★★★★★:
Uncaught TypeError: Cannot read property 'push' of undefined
하다가 내가 패스워드를 하기 시작했다.handleClick()Dashboard★★★★★★ 。
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter as Router } from 'react-router-dom';
import { hashHistory } from 'react-router';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(
<MuiThemeProvider>
<Router history={hashHistory}>
<App />
</Router>
</MuiThemeProvider>,
document.getElementById('root')
);
App.js
import React from 'react';
import { Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default App;
대시보드.js
import React, { Component } from 'react';
import './Dashboard.css';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
...
var curIndex;
class Dashboard extends Component {
constructor(props) {
super(props);
this.handleEnter = this.handleEnter.bind(this);
this.handleChange = this.handleChange.bind(this);
curIndex = 0;
}
handleEnter(e) {
// console.log(curIndex);
this.props.handleClick(curIndex);
}
handleChange(value) {
// console.log(value);
curIndex = value;
}
...
}
export default Dashboard;
Bldgs.js
...
var curTab;
class Bldgs extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.goHome = this.goHome.bind(this);
curTab = 0;
}
handleChange(value) {
this.setState({'selectedTab': value});
console.log(this.state);
}
goHome(e) {
this.props.history.push('/');
}
...
}
export default Bldgs;
「 」를 하기 .history App에서는 ""와 함께 합니다.withRouter을해야 합니다.withRouter하지 않은 Router props ,
이 문제는 구성요소가 라우터에 의해 렌더링된 구성요소의 하위 구성요소의 중첩된 항목이거나, 구성요소가 라우터에 전혀 연결되어 있지 않고 라우터와 별도의 구성요소로 렌더링된 경우에 발생할 수 있습니다.
import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default withRouter(App);
라우터를 사용한 문서
React-router V4의 경우 기능을 다음과 같이 변경합니다.
onClick={this.fun.bind(this)}
fun() {
this.props.history.push("/Home");
}
그리고.
import { withRouter } from 'react-router-dom';
나중에 다음과 같이 내보냅니다.
export default withRouter (comp_name);
기능 컴포넌트를 사용하는 경우 History()를 사용하여 메서드를 푸시할 수 있습니다.
import { useHistory } from "react-router-dom";
그리고 함수에서는 useHistory()를 할당해야 합니다.
let history = useHistory();
이제 history.push를 사용하여 원하는 페이지로 이동할 수 있습니다.
history.push('/asdfg')
올바른 라이브러리에 작업을 제공하지 않고 밀어 넣으려고 합니다.App.js에서
앱.js에서
기본적으로 페이지 이력을 처리하는 BrowserRouter를 사용하고 있으며, 이 react-router-dom 함수는 BrowserRouter를 사용하여 이 작업을 수행합니다.
BrowserRouter 대신 Router를 사용하여 사용자의 이력을 제어하고 이력을 사용하여 동작을 제어합니다.
- npm history "yarn add history@4.x.x" / "npm i history@4.x.x" 를 사용합니다.
- 'react-router-dom'에서 루트를 Import합니다.//BrowserRouter를 사용하지 않음
- createBrowserHistory'에서 createBrowserHistory를 Import한다.
export 하는 것을 잊지 마세요!!export const history = createBrowserHistory();
4. Dashboard.js로의 Import 이력 5. Bldgs.js로의 Import 이력
이게 도움이 되길 바래!!!@secomiyamotto
App.js jj 。는 결국 합격했다.{...this.props}NavBar 컴포넌트로 이동합니다.NavBar 컴포넌트는 스위치루트의 일부가 아닙니다.
import React, { Component } from 'react';
import { Route, Link, Redirect, Switch, withRouter } from 'react-router-dom'
import Navbar from './Navbar.js';
import Home from './Home/HomeCont';
import Login from './Register/Login';
import Dashboard from './Dashboard/DashboardCont';
import './App.css';
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="App">
<header className="App-header">
//SOLUTION!!!
<Navbar {...this.props}/>
</header>
<Switch>
<React.Fragment>
<Route exact path="/" render={(props) => <Home {...props}/>}/>
<Route exact path="/login" render={(props) => <Login {...props}/>}/>
</React.Fragment>
</Switch>
</div>
);
}
}
export default withRouter(App);
내 내비게이션 안에.제가 사용한 버튼은 다음과 같은 코드였습니다.이력을 표시하기 위해 .bind(이것)를 해야 했습니다.this.props.history.push("/")
<Button
color="inherit"
onClick={this.handleLogout.bind(this)}>Logout</Button>
나의 실수는 와 관련하여 잘못된 수입이었다.BrowserRouter(예:
틀렸다:
import { useHistory } from 'react-router'
정답:
import { useHistory } from 'react-router-dom'
이 에러는 BrowserRouter 내부에 컴포넌트를 래핑하여 해결했습니다.
이 점을 잊지 마세요. 아주 흔한 실수입니다.
import { BrowserRouter} from 'react-router-dom';
<BrowserRouter>
<Menu/>
<BrowserRouter>
이력 훅을 받는 것은 라우터의 자녀뿐입니다.
언급URL : https://stackoverflow.com/questions/44009618/uncaught-typeerror-cannot-read-property-push-of-undefined-react-router-dom
'programing' 카테고리의 다른 글
| 서버 127.0.0.1 셸/mongo에 연결할 수 없습니다.js (0) | 2023.03.25 |
|---|---|
| Import React 구문과 Import {Component } 구문의 차이 (0) | 2023.03.25 |
| "not null"과 "not null enable" 사이에는 차이가 있습니까? (0) | 2023.03.25 |
| JavaScript만으로 WordPress 플러그인을 만들 수 있습니까? (0) | 2023.03.25 |
| Angular에서 $resource 캐시를 새로 고치거나 비활성화하는 방법JS (0) | 2023.03.25 |