[React] 'unexpected use of 'history' no-restricted-globals' 오류 해결 😭

회원가입을 하고 나서 메인화면으로 보내주고 싶어서 history.push를 쓰려고 하는데 자꾸 history가 없다고 오류가 떠서 계속 고민했다. 

 

원래는 App.js에서 아래와 같이 Route를 써주고, RegisterPage에서 Register라는 컴포넌트를 불러서 쓰는 형식으로 구현을 했었다. 아래 코드와 같이,,

App.js

import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import Main from './views/Main';
import LoginPage from './views/LoginPage';
import RegisterPage from './views/RegisterPage';

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Main} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

./views/RegisterPage.js

import React, { Component } from 'react'
import Register from '../components/Register';

class RegisterPage extends Component {
    render() {
        return (
            <div>
                <Register />
            </div>
        )
    }
}

export default RegisterPage;

 

./components/Register.js

import React from 'react';
import { post } from 'axios';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import { withRouter } from 'react-router';

class Register extends React.Component {
	// ...

    handleFormSubmit = (e) => {
        e.preventDefault()
        this.addUser()
            .then((response) => {
                console.log(response.data);
            })
        this.props.history.push('/');    
    }
    
    // ...
    
    render(){
        const { classes } = this.props;
        return (
            <div className={classes.root}>
            	<Button variant="contained" color="primary" onClick={this.handleFormSubmit}>추가</Button>
            </div>
        )
    }
}

export default withRouter(withStyles(styles)(Register));

 

Register.js의 render() 함수 안에서 button을 누르면 (회원가입 완료버튼) 메인 화면으로 보내주려고 했는데

 

unexpected use of 'history' no-restricted-globals

 

라는 오류가 발생했다.

온갖 뻘짓을 다했지만 결론은 App.js에서 Route 해준 RegisterPage에서 저 동작을 해줘야 하는 것이었다. 그래서 아예 Register.js를 없애고 RegisterPage.js에 저 코드를 써줬더니 잘 동작했다!

원래도 Register와 RegisterPage를 합치려고 하긴 했지만 저것때문에 오류가 날줄은..

정말 어이없는 실수지만 혹시 저처럼 고생하시는 분이 또 계실까봐 올려봅니다.