Saya mencoba menambahkan menu di aplikasi saya. Saya telah membuat bilah Menu tetapi sekarang saya tidak tahu di mana harus menambahkan halaman saya.

Pertanyaan saya adalah di mana saya harus menambahkan halaman di app.js atau di NavigationBar.js. dan jika saya menambahkan aplikasi, apakah saya harus memberi tahu NavigationBar bahwa inilah halamannya.

Halaman yang ingin saya tambahkan

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

Ini App.js saya

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

Ini adalah kelas 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>
)
}
}   
0
Rahul Waghmare 17 Maret 2020, 23:29

1 menjawab

Jawaban Terbaik

Halaman ditambahkan ke rute.

<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>

Periksa tautan ini: https://reacttraining.com/react-router/web/guides/quick- mulai

1
NinaW 17 Maret 2020, 20:48