React Semantic Ui Menu

Question

我正在尝试在我的应用中添加菜单。我已经创建了菜单栏，但是现在我不知道在哪里添加页面。

我的问题是我必须在app.js或NavigationBar.js中添加页面。如果我添加了应用程序，我必须告诉NavigationBar这是页面。

我要添加的页面

<Customer/>
  <Product/>
  <Store/>
  <Sales/>

这是我的App.js

function App() {
   return (
      <Container>
        <NavigationBar/>
      </Container>
     );
     }
  export default App;

这里是NavigationBar类

export default class NavigationBar extends Component {
state = {}

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

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

const Home = () => (
    <div>
      <h1>Welcome!!</h1>
    </div>
  );

const Main = () => (
    <main>
        <Switch>
            <Route path = './Customer' componenet = {Customer}/>
            <Route path = './Product' componenet = {Customer}/>
            <Route path = './Store' componenet = {Customer}/>
            <Route path = './Sales' componenet = {Customer}/>
        </Switch>
    </main>
);

return (
    <BrowserRouter>
        <div>
            <Menu fixed='top' inverted> 
                <Menu.Item 
                    as={NavLink} to='Customer'
                    name='customer'
                    active={activeItem === 'customer'}
                    onClick={this.handleItemClick}
                    >
                    Customers
                </Menu.Item>
                <Menu.Item 
                    as={NavLink} to='Product'
                    name='product'
                    active={activeItem === 'product'}
                    onClick={this.handleItemClick}
                    >
                    Product
                </Menu.Item>
                <Menu.Item 
                    as={NavLink} to='Store'
                    name='store'
                    active={activeItem === 'store'}
                    onClick={this.handleItemClick}
                    >
                    Store
                </Menu.Item>
                <Menu.Item 
                    as={NavLink} to='Sale'
                    name='sale'
                    active={activeItem === 'sale'}
                    onClick={this.handleItemClick}
                    >
                    Sale
                </Menu.Item>
            </Menu>
            <Main/>
        </div>
    </BrowserRouter>
)
}
}   

Answer 1

页面已添加到路线中。

<Switch>
  <Route path="/customer">
    <Customer />
  </Route>

  <Route path="/product">
    <Product />
  </Route>

  <Route path="/store">
    <Store />
  </Route>

  <Route path="/sales">
    <Sales />
  </Route>

  <Route exact path="/">
    // add path to you landing page
  </Route>
</Switch>

https://reacttraining.com/react-router/web/guides/quick-start