how to navigate on pages using material ui in reactjs-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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;