React 라우팅 오류 You should not use or withRouter() outside a

App.js 재중 코드

import React, {Component , Fragment} from 'react';
import {withRouter , Route , Switch , Redirect} from 'react-router-dom';
import './App.css';
import 'antd/dist/antd.css'
import Home from './component/Home';
import List from './component/List';
@withRouter
class App extends Component {
    render() {
        return (
            <Fragment>
                <Switch>
                    <Route path='/homePage' component={Home}></Route>
                    <Route path='/listPage' component={List}></Route>
                    <Redirect to={`/homePage`}/>
                </Switch>
            </Fragment>

        );
    }
}
export default App;

실행 항목 오류:

←→1 of 2 errors on the page
You should not use  or withRouter() outside a 
▶ 26 stack frames were collapsed.
./src/index.js
C:/Users/abcd/WebstormProjects/ant-table-demo/src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

해결책

다음과 같이 Route를 사용하여 App 구성 요소를 포장합니다.

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

const Root = () => {
    return (
        <BrowserRouter basename='/'>
            <Route path={`/`} component={App}></Route>
        </BrowserRouter>
    )

}

ReactDOM.render(<Root/>, document.getElementById('root'));

그리고 제대로 작동할 수 있습니다.