Using React Router

React can't handle routing on its own, and therefor relies on libraries for help. One such library is React Router, where users can achieve page routing by wrapping their app in one of the provided router components (like BrowserRouter, for example). This won't work on the stage in Codux where components render, however. Instead, you'll need to use MemoryRouter.
The MemoryRouter component stores its locations internally instead of to an external source, and therefor works great while testing components on the stage. Here's an example that demonstrates how to wrap a component in MemoryRouter:
1
2
3
4
5
6
7
8
9
10
11
12
import { createBoard } from '@wixc3/react-board';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { MyComponent } from './my-component';
export default createBoard({
   name: 'My component',
   Board: () => (
       <MemoryRouter>
           <MyComponent />
       </MemoryRouter>
   ),
});
Important!
If your component includes BrowserRouter, you should separate it from the component.
Previous article
Next article