我无法从Primereact菜单更改路线

Question

我正在使用PrimeAreact菜单来更改路由，我遇到的问题是当我运行应用程序时，行"命令：this.props.ruta("金属")"自动运行，我不能回家。我试图将参数传递给"；功能句柄(路由)"；为了实现路线的改变，但不起作用。它不知道我所做的是否正确。我希望你能帮助我。谢谢。

App.js

import './App.css';
import AppMenu from './AppMenu';
import DetalleMeet from './components/detalleMeet.component'
import { MeetList } from './components/meetList.component';
import { Switch, Route, Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
function App() {
const history = useHistory();
function handle(ruta) {
history.push("/" + ruta);
}
return (
<div className="App">
<AppMenu ruta={handle} />

<div className="container mt-3">
<Switch>
<Route exact path={"/meetups"} component={MeetList} />
<Route exact path={"/detalle"} component={DetalleMeet} />
<Route exact path={["/", "/home"]} component={MeetList} />
</Switch>

</div>
</div>
);
}
export default App;

AppMenu.js

import "primeicons/primeicons.css";
import 'primereact/resources/themes/saga-blue/theme.css';
import React from 'react';
import 'primeflex/primeflex.css';
import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';
import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';
export default class AppMenu extends React.Component {
constructor(props) {
super(props);
this.items = [
{
label: 'Home',
icon: 'pi pi-fw pi-file',
command: this.props.ruta('home')
},
{
label: 'Detalle',
icon: 'pi pi-fw pi-pencil',
command: this.props.ruta('Detalle')
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
];

}
render(){
const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="p-mr-2"></img>;
const end = <InputText placeholder="Search" type="text" />;
return (
<div>
<div>
<div className="card">
<Menubar model={this.items} start={start} end={start} />
</div>
</div>
</div>
);
}
}

Answer 1

我已经用react router实现了primefaces菜单栏。

首先，我创建了一个导航项对象，如primefaces文档中所述。

navigationConfig.js如下所示：

export const navitems = [
{
label: 'Africa',
icon: 'pi pi-fw pi-user',
url: '/africa'
},
{
label: 'Europe',
icon: 'pi pi-fw pi-pencil',
url: '/europe'
},
{
label: 'Asia',
icon: 'pi pi-fw pi-th-large',
items: [
{
label: 'Japan',
url: '/japan'
},
{
label: 'Mongolia',
url: '/mongolia'
},
{
label: 'Nepal',
items: [
{
label: 'Kathmandu',
url: '/kathmandu'
},
{
label: 'Pokhara',
url: '/pokhara'
}
]
}
]
}
]

然后在我的导航组件中，我创建了一个递归方法，将菜单项的每个url映射到一个命令方法中，然后从react-router-dom调用useHistory()钩子的history.push()方法

完整导航组件如下所示：

import React from 'react';
import * as nav from '../config/navigation';
import { Menubar } from 'primereact/menubar';
import {Button} from 'primereact/button';
import { useHistory } from "react-router-dom";

const Navigation = (props) => {
const history=useHistory();
const getMenuObject=(menu)=>{

let menuObj={};
menuObj.label=menu.label;
if(menu.items){
//if the navigation has items property then map each item and call itself again
menuObj.items=menu.items.map(nestedItem=>{
return getMenuObject(nestedItem);
});  
}
if(menu.icon){
menuObj.icon=menu.icon;
}
if(menu.url){
menuObj.command=()=>{
navigatePage(menu.url);
}
}

return menuObj;
}
const navigationMenu=nav.navitems.map(menuItem=>{
return getMenuObject(menuItem);
})

const navigatePage=(url)=>{
history.push(url);
}

return (
<Menubar 
model={navigationMenu}
end={<Button label="Logout"  onClick={(e)=>props.onLogout(e)} icon="pi pi-power-off"/>}
/>
);
}
export default Navigation;

希望它能帮助任何正在寻找解决方案的人。

Answer 2

关于React Router和PrimeAct的新版本。您可以使用useNavigate直接进行摇滚。

import "./MyMenu.scss"
import React from "react";
import { Menubar } from 'primereact/menubar';
import {InputText} from "primereact/inputtext";
import {Button} from "primereact/button";
import {PrimeIcons} from "primereact/api";
import {useNavigate} from "react-router-dom";

const MyMenu = (props) => {
const navigate = useNavigate();
const items =  [
{
label: 'Home',
icon: PrimeIcons.HOME,
command: () => {navigate('/') }
}
];
let searchAndLogout = <div>
<InputText placeholder="Search" type="text"/>
<Button label="Exit" icon="pi pi-power-off"/>
</div>
return (
<div className="my-menu">
<Menubar model={items} end={searchAndLogout}/>
</div>
);
}

export default MyMenu;

Answer 3

我可以修复它。问题在于如何在命令中调用函数。我只需要改变"；命令：this.props.ruta("home")"对于"；命令：()=>{this.props.ruta('/home')}"；。我希望它能帮助到别人。接下来是新代码。

import "primeicons/primeicons.css";
import 'primereact/resources/themes/saga-blue/theme.css';
import React from 'react';
import 'primeflex/primeflex.css';
import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';

import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';

export default class AppMenu extends React.Component {
constructor(props) {
super(props);

this.home = this.home.bind(this);
this.items = [
{
label: 'Home',
icon: 'pi pi-fw pi-file',
command: () => {this.props.ruta('/home')}
},
{
label: 'Detalle',
icon: 'pi pi-fw pi-pencil',
command: () => {this.props.ruta('/detalle')}
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
];

}

home() {
this.props.ruta('/home')
}
detalle() {
this.props.ruta('/detalle')
}

render(){
const start = <img alt="logo" src="showcase/images/logo.png" onError= 
{(e) => e.target.src='https://www.primefaces.org/wp- 
content/uploads/2020/05/placeholder.png'} height="40" className="p-mr-2"></img>;
const end = <InputText placeholder="Search" type="text" />;
return (
<div>
<div>
<div className="card">
<Menubar model={this.items} start={start} end={start} />
</div>
</div>
</div>
);
}
}