Объектное размещение приложения, которое содержит провайдер, хранящий все состояние (React)

Я пытаюсь сделать аутентификацию на django-react web и наткнулся на этот туториал на youtube https://www.youtube.com/watch?v=BxzO2M7QcZw&t=2907s Там есть объект app, который содержит провайдер, который оборачивает компоненты и определяет магазин. В этом учебнике app вызывается внутри функции render в файле index.js. Ниже приведен код

const app = (
    <Provider store={store}>
        <App />
    </Provider>
)

ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

Я пытаюсь следовать этому руководству, но у меня другой формат index.js, потому что я создаю все мои пути маршрутизации внутри него, в то время как в руководстве маршрут создается внутри app.js. Мой вопрос в том, куда я должен поместить объект app, если у меня есть такой код в моем файле index.js?

const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(reducer, composeEnhances(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <Homepage></Homepage>
        <SportsSearch></SportsSearch>
    </Provider>
)

const sports_dict = ['futsal', 'badminton', 'basket', 'sepak-bola', 'voli', 'tenis', 'billiard', 'tenis-meja']

render(
  <BrowserRouter>
    <Routes>
    <Route path="/" element={<Homepage />} />
        <Route path="/R1" element={<RecommendationOne />} />

        {sports_dict.map(sport => {
            return (
                <Route path={`/${sport}`} element={<SportsSearch variable={sport} />} />

            )
        })}
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Я пытался поместить мои app внутрь render, но получаю ошибку Error: Target container is not a DOM element.. Ниже приведен код, который я пробовал

render(
  app,
  <BrowserRouter>
    <Routes>
    <Route path="/" element={<Homepage />} />
        <Route path="/R1" element={<RecommendationOne />} />

        {sports_dict.map(sport => {
            return (
                <Route path={`/${sport}`} element={<SportsSearch variable={sport} />} />

            )
        })}
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Вернуться на верх