Estoy tratando de realizar una autenticación en django-react web y encontré este tutorial en youtube https://www.youtube.com/watch?v=BxzO2M7QcZw&t=2907s Hay un objeto llamado app que contiene un proveedor que envuelve componentes y definir una tienda. En ese tutorial, la app se llama dentro de la función de procesamiento en el archivo index.js. A continuación se muestra el código

 const app = ( <Provider store={store}> <App /> </Provider> ) ReactDOM.render(app, document.getElementById('root')); registerServiceWorker();

Estoy tratando de seguir este tutorial, pero tengo un formato diferente de index.js porque creo toda mi ruta de enrutamiento dentro de él, mientras que el tutorial crea la ruta dentro app.js Mi pregunta es, ¿dónde debo poner el objeto de la app si tengo un código como este dentro de mi archivo 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") );

Intenté poner mi app dentro del renderizado, pero aparece un error de Error: Target container is not a DOM element. el siguiente código es lo que he intentado

 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") );