我无法从 Primereact 菜单更改路线

问题描述

我正在使用 PrimeReact 菜单来更改路线，我遇到的问题是当我运行应用程序时，“command: this.props.ruta ('Detalle')”行自动运行，但我无法更改回家.我尝试将参数传递给“函数句柄（路由）”以实现路由的更改但不起作用。它不知道我这样做是否正确。我希望你能帮助我。谢谢。

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>

        );

    }

}

解决方法

我可以解决它。问题在于我如何在命令中调用函数。我只需要将“命令：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>

        );

    }

}