Как предотвратить сбой приложения React при использовании реакции-роутера

Question

снимок экрана ошибки Я пытаюсь включить React-router в свое приложение React и использую его в компоненте навигации, но после его использования и инициализации пути мое приложение реагирует на сбой. Пожалуйста, используйте код ниже:

Попытка записи в соответствии с синтаксисом tact-router v4, используется в файле App.js, а ссылка и маршрут - в компоненте 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

Согласно вашему сбою снимок экрана , ваше приложение входит в бесконечный цикл в Создать компонент , проверьте код создания компонента