I am having a problem with the WordPress menu with react routing, I don't know if I should use the react-router package or not .. or it can be handled otherwise.
I am basically creating a WordPress menu and then a submenu and trying to load react js on the submenu but it's loading on the main page, except the settings page.
add_action( 'admin_menu', 'plugin_admin_menu' );
function plugin_admin_menu() {
add_menu_page(
__( 'PluginName', WPA_TEXT_DOMAIN ),
__( 'PluginName', WPA_TEXT_DOMAIN ),
'manage_options',
'plugin-name-slug',
'render_main_screen_callback',
'', // icon
60 // priority/position
);
add_submenu_page(
'plugin-name-slug,
__( 'Settings', WPA_TEXT_DOMAIN ),
__( 'Settings', WPA_TEXT_DOMAIN ),
'manage_options',
'plugin-name-settings',
'render_settings_screen_callback'
);
}
so far is good but the issue is I am trying to load react app here on the submenu settings page but its loading on main_menu rather than the submenu
function render_settings_screen_callback() {
printf( '<div id="%s" class="%s"></div>', 'admin-root-app', 'wpauctionify-wrap wrap' );
}
and this is the code of my react side
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
const rootElement = document.getElementById('admin-root-app');
if ( rootElement ) {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>, rootElement );
}
Santiago Trujillo