Cockpit.jump do not working

[zhaojing1987]

Explain what happens

I developed a component using React；

<script type="text/javascript" src="../base1/cockpit.js"></script>  //indexl,html

 import cockpit from 'cockpit';

 <button onClick={() => {cockpit.jump("/system/terminal")}}>
       <i className="dripicons-gear noti-icon"></i>{' '}
 </button>

But it does not take effect and there are no errors or information prompts.
Other API methods can be used, such as cockpit.location

Version of Cockpit

264-1ubuntu0.22.04.1~bpo20.04.1

Where is the problem in Cockpit?

None

Server operating system

Ubuntu

Server operating system version

No response

What browsers are you using?

Firefox

System log

No response

[martinpitt]

I'm afraid there is not enough information to help you yet. You only posted a tiny snippet of the page, and that looks correct.

The first thing to try is to take a look at the JS developer console, both to see error messages there, and also to check if the onClick event actually happens (in the DOM Inspector), and to check the Networking tab for whether this actually requests the terminal URL.

Do you have a runnable example somewhere?

[zhaojing1987]

I did not use the starter-kit template for development, I used create-repeat-app to test cockpit. jump() using the simplest code, but it did not work. My onClick event is running normally, but there are no messages or errors on the browser console, and no requests have been initiated on the network.
Does cockpit.js not support create repeat app? But other methods can be executed normally, such as cockpit.language, cockpit.location

[KKoukiou]

How do you know that your onclick event is running? I assume it's actually not, in react you indeed should write it with camelCase, line onClick, but your code is probably not converted from jsx to js, so you need onclick.

[zhaojing1987]

import cockpit from 'cockpit';
import React from 'react';

const _ = cockpit.gettext;

export class Application extends React.Component {
    constructor() {
        super();
        this.state = { hostname: _("Unknown") };

        //When I comment out this code, cockpit. jump() will not run. When I uncomment it, it will run normally. Is there any problem here?
        // cockpit.file('/etc/hostname').watch(content => {
        //     this.setState({ hostname: content.trim() });
        // });
    }

    render() {
        return (
            <>
                <button onClick={() => cockpit.jump("/system")}>go to</button>
            </>
        );
    }
}

[zhaojing1987]

Is Cockpit not connected to the server? When calling cockpit.file, it actively connects to the server

[martinpitt]

Sorry, we really need more context and something runnable to be able to help you.

[zhaojing1987]

I downloaded the starter-kit and made simple modifications to the code。

import cockpit from 'cockpit';
import React from 'react';

const _ = cockpit.gettext;

export class Application extends React.Component {
    constructor() {
        super();
        this.state = { hostname: _("Unknown") };

        //When I comment out this code, cockpit. jump() will not run. 
        //When I uncomment it, it will run normally. Is there any problem here?
        // cockpit.file('/etc/hostname').watch(content => {
        //     this.setState({ hostname: content.trim() });
        // });
    }

    render() {
        return (
            <>
                <button onClick={() => cockpit.jump("/system")}>go to</button>
            </>
        );
    }
}

What other contexts do you need me to provide？
The current problem is that clicking the button does not respond. If I print the output inside, the output content will be displayed in the browser, but the jump method has no effect and the console does not have any error prompts