I'm using ExtJS inside React, I'm using Ext-React package (@sencha/ext-react) and it's causing a lot of problems when using it with React Router nested routes and < Link >s
I have this in index.js:
<ExtReact>
<Container fullscreen>
<div>
<Provider store = {configureStore()}>
<BrowserRouter>
<Switch>
<Route path = "/" component = {DashboardComponent} />
</Switch>
</BrowserRouter>
</Provider>
</div>
</Container>
</ExtReact>
And inside DashboardComponent, I have this:
<div>
<ExtReact>
<TitleBar title="test" docked="top"></TitleBar>
<BrowserRouter>
<div>
<Link to = "/users/list">user's list</Link>
<Switch>
<Route path = "/users" component = {UsersManagementRoutes} />
</Switch>
</div>
</BrowserRouter>
</ExtReact>
</div>
Running this always produces:
Uncaught Error: You should not use outside a < Router >
And the same issue if removing the link component, same problem but showing < Switch > instead of < Router >, same if removing the switch component and leaving the < Route >.
What am I missing?