GeekyAnts / react-pluggable

A plugin system for JS & React apps.

Home Page:https://react-pluggable.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to handle routing and navigation in react-pluggable

AbolfazlHeidarpour opened this issue · comments

Hi there.
I want to update my routes and navigations when a plugin is added from pluginStore class.
For example suppose we have plugin called contacts which is React component that shows list of contacts, and also there is a button in sidebar called show contacts. When user clicks on show contacts button, contacts plugin is added to the app, along with this, routes, this means that my app's url become http://localhost:port/mainApp/contacts. How can we implement such a functionality with react-pluggable?
I have also another question about react-pluggable. suppose I have added contacts feature component from pluginStore and my routes are updated, when I refresh my page or enter a new session or close browser and open the page again, The contacts section must be available and nothing has changed, and contacts route must be available in routings. How to implement that?
Should I save routes and components in a database or react-pluggable handles such a situation? Or is there another solution?
Thanks

@AbolfazlHeidarpour I know this is a pretty old question but I also wanted something like this.

Not sure what's the recommended way with React-Pluggable but I used React-Router and I'm pretty happy with it.
The coupling between the plugins (Auth, Router & Toast plugin in my example) is very small and the RouterPlugin can be used standalone.
Also, every feature from React-Router can be used (nested routes not implemented yet but should be possible).

The biggest issue was the redirecting from React-Router-Dom as there is only useNavigate, which wasn't directly usable within the plugin. That's why there is a NavigateWrapper and the event NavigateReadyEvent - see RouterPlugin code in the example to get an idea.

You can find an example Codesandbox here.

I'm new to React-Pluggable if there is anything to improve, please let me know.

The structure of the plugins in the above Codesandbox looks like the following:
mermaid-diagram-2023-08-06-172404

I think I'll use the Routing in my next app. Maybe I'm extracting the RouterPlugin in a repository so it's reusable.