如何在 reactjs 中使用 material ui 在页面上导航

Question

我正在使用 material-Ui 为我的仪表板制作一个抽屉，我在浏览我的页面时遇到了问题

首先，我想分享我的应用程序。 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>

这是我的仪表板代码：

在这段代码中，我是一个具有onClick页面导航功能的对象

  const listItem = [
    {
      text:'Dashboard',
      onclick:()=>navigate("/dashboard")
    }, 
    {
      text:'Prdocut',
      onclick:()=>navigate("/product")
    } 
  ]

这是我的渲染项目列表

<List>
  {listItem.map((item, index) => {
    const { text,onClick} = item;
      return (
         <ListItem button key={text} onClick={onClick}>
            <ListItemText primary={text} />
         </ListItem>
        )})}
</List>

但它不是导航我的产品页面

Answer 1

navigate函数定义在哪里？这应该在组件的主体上，使用来自 React Router DOM 的 useNavigate 钩子......所以你的代码应该看起来像

// on top of the file:
import { useNavigate } from 'react-router-dom';

// on your component:
const navigate = useNavigate();

const listItem = [
    {
      text:'Dashboard',
      onclick:()=>navigate("/dashboard")
    }, 
    {
      text:'Prdocut',
      onclick:()=>navigate("/product")
    } 
];

return (
    <List>
      {listItem.map((item, index) => {
        const { text, onclick } = item;
          return (
             <ListItem button key={text} onClick={onclick}>
                <ListItemText primary={text} />
             </ListItem>
            )})}
    </List>
);

作为更简单的替代方案，您可能喜欢使用 React Router DOM 的 Link 组件，像 import { Link } from 'react-router-dom'; 一样导入它并在 jsx 上像这样使用它：

const listItem = [
    {
      text:'Dashboard',
      onclick: '/product'
    }, 
    {
      text:'Product',
      onclick: '/product',
    } 
];

return (
    <List>
      {listItem.map((item, index) => {
        const { text, onclick } = item;
          return (
            <Link key={text} to={onclick}>
                <ListItem button>
                <ListItemText primary={text} />
                </ListItem>
            </Link>
            )})}
    </List>
);

无论如何，错误出在 JSX 上（具体来说，是在 listItem 上的 map 函数上）。在你的代码中，你正在解构一个像 { text, onClick } 这样的项目，但它不应该是 camelcase onClick，像这样：{ text, onclick }.

Answer 2

错误在onclick 但是在 map 函数中你将它破坏为 onClick 但它是 onclick

应该喜欢

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  const listItem = [
    {
      text: "Dashboard",
      onc: () => navigate("/")
    },
    {
      text: "Prdocut",
      onc: () => navigate("/home")
    }
  ];
  return (
    <>
      <ul>
        {listItem.map((item) => {
          const { text, onc } = item;
          return <li onClick={onc}>{text}</li>;
        })}
      </ul>
    </>
  );
};
export default Home;

如何在 reactjs 中使用 material ui 在页面上导航

how to navigate on pages using material ui in reactjs

javascript

reactjs

material-design

material-ui

mern