1

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?

Kareem
  • 259
  • 1
  • 3
  • 13

0 Answers0