看不到客户页面

Question

我正在尝试在我的项目中使用react-semantic-UI。我在app.js中添加了菜单栏，其中有Customer作为菜单项。当我单击客户时，在地址栏中看起来像这样http://localhost:3000/Customer但客户页面不存在

NavigationBar.js

import React, { Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { Link, BrowserRouter } from 'react-router-dom';

export default class NavigationBar extends Component {
state = {}

handleItemClick = (e, { name }) => this.setState({ activeItem: name })

render() {
const { activeItem } = this.state

return (
    <BrowserRouter>
    <Menu>
    <Menu.Item link
      as={Link} to="./Customer"
      name='customer'
      active={activeItem === 'customer'}
      onClick={this.handleItemClick}
    >
      Customers
    </Menu.Item>
  </Menu>
    </BrowserRouter>
)
}
}

App.js

import React from 'react';
import './App.css';
import NavigationBar from './components/NavigationBar';

function App() {
  return (
       <div>
         <NavigationBar/>
       </div>
  );
}

export default App;

Customer.js

import React, {useEffect, useState} from "react";

const Customer = () => {
const [users, setUsers] = useState([]);

useEffect( () => {
    getCustomers();
}, []);

async function getCustomers() {

}

return(
    <div>
        <p>This is Customer page</p>
    </div>
);

};

export default Customer;

这是镀铬检查中的外观

Chrome inspect view

Answer 1

import React, { Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { Link, BrowserRouter } from 'react-router-dom';

export default class NavigationBar extends Component {
state = {}

handleItemClick = (e, { name }) => this.setState({ activeItem: name })

render() {
const { activeItem } = this.state

return (
    <BrowserRouter>
    <Menu>
    <Menu.Item link
      as={Link} to="./Customer"
      name='customer'
      active={activeItem === 'customer'}
      onClick={this.handleItemClick}
    >
      Customers
    </Menu.Item>
  </Menu>
    </BrowserRouter>
)
}
}