How to navigate admin panel user from a local plugin to a content-manager page?

Questions and Answers Frontend-React
1

Hi everyone!

I’ve implemented an appointment booking calendar UI as a local plugin (using Toast UI React Calendar) and would like to take advantage of the existing UI of the Content Manager plugin to create/update records.

My question is: how can I navigate the user to the “create record/update record page” from my plugin after the user triggers some event in my local plugin?

I’ve tried:
window.location.href = http://localhost:8000/admin/plugins/content-manager/collectionType/application::booking.booking/create

But this results in a full page load, which is not very pretty.

Is there a React way of doing this? For example using react-router. I imagine I would need access to the content-manager plugin components and containers to do this.

Or is there a better way?

2

I had the exact same question - came here for ideas. You saying “For example using react-router” made me think: “oh, of course react-router-dom is available bc the default {pluginName}/admin/src/pages/App/index.{js|tsx} file uses routes”.

I looked up the version of react-router-dom being used in the plugin’s yarn.lock file - it’s v5. So we can use the useHistory hook from that version (React Router: Declarative Routing for React.js).

import { useHistory } from "react-router-dom";

function SomeComponentInYourPlugin() {
  const history = useHistory();

  return (
    // api::blog.blog is an example collection id
    <button type="button" onClick={() => history.push('/content-manager/collectionType/api::blog.blog/1'}>View Blog ID 1</button>
  )
}