我无法从Primereact菜单更改路由

Question

我正在使用命令菜单来更改路线，我遇到的问题是当我运行应用程序时，行“PrimeReact : this.props.ruta ('Detalle')”自动运行，我无法切换到主页。我试着把参数传给“函数句柄( route )”来实现路由的改变，但是没有起作用。它不知道我做的是否正确。我希望你能帮助我。谢谢。

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路由器实现了primefaces菜单栏。

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

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

我可以修好它。问题出在我在命令中调用函数的方式。我只需要将"command: this.props.ruta('home')“改为"command：() => {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>

        );

    }

}