Conditionally Rendering Children with Routes

The conditionalRenderers key in the codux.config.json file is used to list the components that render different parts of your application based on certain conditions. For instance, if you're using <Routes /> to display different components depending on the URL, you would include "Routes" in the conditionalRenderers array.
This key is particularly useful in projects that use libraries like React Router or React Navigation for routing and navigation. By listing these components in conditionalRenderers, Codux can keep the application state in sync with the current route and navigation stack, which aids in tracking the application's state.
Here's what you need to know about the `conditionalRenderers` key:
  • It takes an array of strings as its value.
  • Each string is the name of a component that conditionally renders its children.
  • If your project doesn't use such components, you can leave `conditionalRenderers` out or set it to an empty array.
Here's an example configuration for a project that uses "Routes" to conditionally render its children:
1
2
3
4
5
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "conditionalRenderers": ["Routes"]
}
Previous article
Next article