如何在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:'Product',
      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: '/dashboard'
    }, 
    {
      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 上的映射函数上）。在您的代码中，您正在解构像

{ text, onClick }

这样的项目，但它不应该是驼峰式 onClick，如下所示：

{ text, onclick }

。

Answer 2

错误出现在onclick中 但在地图功能中，您将其破坏为 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;