在路由器路由上反应无限循环

Question

每当运行以下代码行时，我都会陷入无限循环

<Route exact path='/' component={App} />

我遇到一个无限循环，我认为它是因为react不知道im指向类名App，我如何让React知道im指向类名？

以下内容在没有<Route exact path='/' component={App} />

的情况下有效

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import AddItem from './components/AddItem';
import IndexItem from './components/IndexItem';


class App extends Component {
  render() {
    return(

        <Router>
          <div>
            // <Route exact path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path = '/index' component = {IndexItem}/>
          </div>
      </Router>



    )
  }
}

export default App;

Answer 1

您正在<App />内渲染<App />。

您的React应用的index.js正在呈现该组件。当App组件呈现时，“ /”路由匹配并尝试再次呈现该组件。因此，无限循环。