如何使用 material ui 在不同的组件上导航

Question

如何使用 material UI

在不同的组件上导航

这是我的抽屉列表的代码

  <List>
          {['POS', 'Stock', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
    </List>

我想在股票页面上导航

App.js

  <Provider store={store}>
    <BrowserRouter>
        < Routes>
          <Route exact path='/' element={<Login/>} />
          <Route exact path='/dashboard' element={<Dashboard/>} />
          <Route exact path='/product' element={<Product/>}/>
        </Routes>
      </BrowserRouter>
    </Provider>

我希望如果我单击此 listItem 元素以便打开该组件这是我的 GUI

Answer 1

在这种情况下有两种处理路由的方法：

<Link to="<route>"> 由 react-router 自己提供。您可以用它包装您的 ListItem，它将用作锚标记并重定向到页面。 Ref
您也可以通过向 ListItem 添加一个 onClick 方法并传递您要重定向到的路由来处理它。使用 useHistory 挂钩，可以实例化历史对象，方法 history.push(<route>) 将完成这项工作。 Ref

如何使用 material ui 在不同的组件上导航

How to navigate on different componet using material ui

javascript

frontend

reactjs

material-ui

mern