Question

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

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

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;

当我运行应用程序并单击“创建”或“列表”时，应渲染各个组件，但是当我运行react-app时，应用程序崩溃。

Answer 1

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

使用React-Router时如何防止React应用崩溃

1 个答案: