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

Question

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

已尝试根据 t react-router v4 语法编写，在 App.js 文件中使用，Link 和路由已在 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;

当我运行应用程序并单击创建或列表时，应呈现相应的组件，但当我运行反应应用程序时应用程序崩溃。

Answer 1

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

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

How to prevent React app crashing when react-router is used

reactjs

react-router

react-router-v4