如何使用reactjs中的材料ui在页面上导航

Question

我正在使用材料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中但在地图功能中，你将其破坏为点击，但它是点击

它应该像

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;