反应语义 Ui 菜单

Question

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

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

我要添加的页面

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

这是我的 App.js

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

这是 NavigationBar class

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>

检查此 link： https://reacttraining.com/react-router/web/guides/quick-start

反应语义 Ui 菜单

React Semantic Ui Menu

reactjs

semantic-ui-react