Best practices for handling routes

When writing plugins and using react-router your routes live in your plugins route context. That means that whenever you use Route, Switch or Link, the base route of your plugin is prefixed automatically. So when using these components, you use them as if your plugin would be a standalone app.

If for example the route of your plugin is /reporting and you set up a route called /order-report in your plugin, then the resulting route for the user will be /reporting/order-report. With this you don't need to prepend your base route to every path of your plugin and in the case your plugin's route will be changed, you don't need to do changes in your app.

Exceptions for automatic route prefixing

There are exceptions though (most of them due to technical limitations). The automatic route prefixing only works for this three components: Route, Switch or Link. Any other way of changing or receiving the route will and need to include the base route.

For example when using the match or location prop of react-router, the full route is used. This is especially important when you need to take over route matching yourself. Routes are also not added when using history.go() or history.replace() to set history imperatively. In this case you need to prepend the base route yourself as well.

To prepend your plugin's route you should use the getBaseRoute() SDK method to receive your plugin's route dynamically (e.g. history.go(getBaseRoute() + '/order-report')).

Limitations

Because we override the existing Route, Switch, and Link, you can't go outside of your plugin's route context. If you need to do that, please use the imperative versions described above. In the future we will expose a way to link to other plugins.

If you find bugs or unusual behaviour related to the auto prefixing that were not described here, please contact the portal team.