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

Question

I am making a drawer for my dashboard using material-Ui, I have faced an issue navigating on my pages

first, I wanna share my app. js and here I have product route

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

here is my dashboard code:

In this code, I am an object who has an onClick function for navigation on pages

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

here is my list of who is rendering the items

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

but it's not navigation my my product page

Answer 1

Where is the navigate function definition? This should be on the body of the component, using the useNavigate hook from React Router DOM... So your code should look like

// 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>
);

As a more simple alternative, you may like to use Link component of React Router DOM, importing it like import { Link } from 'react-router-dom'; and using it like this on the 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>
);

Anyways, the error is on the JSX (specifically, on the map function over listItem). In your code, you're destructuring an item like { text, onClick } but it should be NOT camelcase onClick, like this: { text, onclick } .

Answer 2

the error is in onclick but at map function you destructing it as onClick but it is onclick

it should like

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;