表格无法加载

Question

由于某种原因，我在App.js文件中创建了一个名为“ / adminvend”的路径后，React应用程序将不会加载我的表单。它说页面无响应，有人知道这是为什么吗？我输入了管理表单搜索供应商路径，并且一直加载，直到Google Chrome抛出“ React应用无响应”为止，我不知道问题出在哪里。我认为它可能在“管理表单搜索供应商”文件中。有人可以帮我解决这个问题吗？

;;;;;;;;;;;;;;;;;;;;;;;;;; Admin Form Search Vendor ;;;;;;;;;;;;;;;;;;;;;;

import React, { Component } from 'react';
import { Nav, NavDropdown, Navbar, Button, Col } from 'react-bootstrap';
import styled from 'styled-components';

const Styles = styled.div`
.navbar {
    background-color: #222;
  }

  .navbar-brand, .navbar-nav .nav-link, .navbar-text, .form-label {
    color: #C0C0C0;

    &:hover {
      color: white;
    }
  }
  * {font-size: 15px;}
`

export const AdminNavigation = () => ( 
  <Styles>   
    <Navbar>
      <Navbar.Brand href="/">ABC Group</Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse className="justify-content-end">
        <Navbar.Text>Signed in as: Alexander Varghese&nbsp;</Navbar.Text>
      </Navbar.Collapse>
      <Button href="/">Sign Out</Button>
    </Navbar>
    <Navbar expand="lg">
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="/">Personal</Nav.Link>
        <NavDropdown title="Employee" id="basic-nav-dropdown">
          <NavDropdown.Item href="/">Add Employee</NavDropdown.Item>
          <NavDropdown.Item href="/">Delete Employee</NavDropdown.Item>
          <NavDropdown.Item href="/">Update Employee</NavDropdown.Item>
          <NavDropdown.Item href="/">Search For Employee</NavDropdown.Item>
        </NavDropdown>
          <NavDropdown title="Equipment" id="basic-nav-dropdown">
          <NavDropdown.Item href="/">Add Equipment</NavDropdown.Item>
          <NavDropdown.Item href="/">Delete Equipment</NavDropdown.Item>
          <NavDropdown.Item href="/">Assign Equipment</NavDropdown.Item>
          <NavDropdown.Item href="/">Search For Equipment</NavDropdown.Item>
        </NavDropdown>
          <NavDropdown title="Vendor" id="basic-nav-dropdown">
          <NavDropdown.Item href="/">Add Vendor</NavDropdown.Item>
          <NavDropdown.Item href="/">Delete Vendor</NavDropdown.Item>
          <NavDropdown.Item href="/">Update Vendor</NavDropdown.Item>
          <NavDropdown.Item href="/">Search For Vendor</NavDropdown.Item>
        </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>
</Styles>
)

export const BottomNavigationBar = () => (
  <Styles>
    <Navbar expand="lg" fixed="bottom">
    <Navbar.Brand href="/help">Help</Navbar.Brand>
    <Navbar.Brand position="right">Address: 400 South Orange Ave, South Orange, NJ 07079</Navbar.Brand> 
    <Navbar.Brand position="right">Contact: (973) 761-9000</Navbar.Brand>    
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    </Navbar>
  </Styles>

)

export const Form = () => (
    <Styles>
        <Form>

      <Form.Group as={Col} controlId="formGridEmail">
        <Form.Label>Vendor ID</Form.Label>
      </Form.Group>

      <Form.Group controlId="formGridAddress1">
        <Form.Label>OR</Form.Label>
      </Form.Group>

      <Form.Group as={Col} controlId="formGridPassword">
        <Form.Label>Vendor Name</Form.Label>
      </Form.Group>

    <Button variant="primary" type="submit">
      Submit
    </Button>
  </Form>
  </Styles>
)

class AdminFormSearchVend extends Component {
    render ()  {
        return (
          <React.Fragment>
            <AdminNavigation />
            <Form />
            <BottomNavigationBar />
          </React.Fragment>
        );
    }
}


export default AdminFormSearchVend; 


;;;;;;;;;;;;;;;;;;;;;;;;; App.js ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;


import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Pages/Home';
import { About } from './Pages/About';
import { NoMatch } from './Pages/NoMatch';
import  { ProtectedRoute } from './ProtectedRoute';
import EmployeePage from './Pages/EmployeePage';
import  AdminFormSearchVend  from './Pages/Forms/AdminFormSearchVend';


class App extends Component {

constructor()  {
  super()

  this.state={
    LoggedIn: false,
    isAdmin: false,
    isEmployee: false
  }
  this.handler = this.handler.bind(this)
}

handler()   {
  this.setState ({
    LoggedIn: true
  })
}

  render() {
    console.log(this.state.LoggedIn)
    return (
      <React.Fragment>
          <Router>
            <Switch>
              <Route exact path="/" render={(props) => <Home {...props} action ={this.handler} />}/>
              <ProtectedRoute exact path = "/employeepage" component = {EmployeePage} Logged={this.state.LoggedIn} />
              <Route path="/about" component={About} />
              <Route path="/adminvend" component={AdminFormSearchVend} />
              <Route component={NoMatch} />
            </Switch>
          </Router>
      </React.Fragment>
    );
  }
}

export default App;