使用 react-router 时如何防止 React 应用程序崩溃

Question

error screenshot我正在尝试在我的 React 应用程序中包含 React-router，并且我在导航组件中使用它，但是在使用它并初始化路径之后，我的反应应用程序崩溃了。请参考以下代码：

已经尝试按照 react-router v4 语法编写，在 App.js 文件中使用，Link 和 Route 已经在 Navigation.js 组件中使用。

import React,{ Component } from 'react';
import { Route, Link } from "react-router-dom";
import './Navigation.css';
import App from '../../App';
import Create from '../pages/create/Create';
import List from '../pages/list/List';


class Navigation extends Component{
    render(){
    return (
          <div>
            <nav className="navbar navbar-expand-md navbar-dark bg-dark">
              <Link className="navbar-brand mr-auto" to="/">HOME</Link>
              <div id="navbarSupportedContent">
                <ul className="navbar-nav">
                  <li className="nav-item active">
                    <Link className="nav-link" to="/Create">Create</Link>
                  </li>
                  <li className="nav-item" >
                    <Link className="nav-link" to="/List">List</Link>
                  </li>
                </ul>
              </div>
            </nav>
            {/* <Route path="/" exact component={App} /> */}
            <Route path="/Create" component={Create} />
            <Route path="/List" component={List} />
          </div>
    );
  }
}

export default Navigation;

App.js：

import React, { Component } from 'react';
import Navigation from './js/navigation/Navigation.js';
import { BrowserRouter as Router } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navigation/>
          <div class="jumbotron text-center">
            <h1 class="display-4">Welcome</h1>
            <hr class="my-4"/>
            <p>Please Click on Create to Create the Schema and on List to View the Schema.</p>
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

当我运行应用程序并单击 Create 或 List 时，应该呈现相应的组件，但是当我运行 react-app 时应用程序崩溃了。

Answer 1

根据您的崩溃截图，您的应用在您的创建组件中进入无限循环，请检查您的创建组件代码