Trying to get some Card components load up on site - however when I add to the root line it comes up with an error (removing the does make my site work fine but it dosnt load the card component) New to react so not sure if this is an outdated way. [1]: https://i.stack.imgur.com/2JIup.png

CodePudding user response：

Not sure what's in the Card component, but you can try something like this:

1. Move <Card /> component to <App />'s component body
2. Refactor your root as follows

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

CodePudding user response：

I think something more like this is what you want.

Copied from link:

import ReactDOM from "react-dom";
import App from 'App';
import Card from './Cards/CardsUI'

const container = document.getElementById('root');

// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render -- Render your card here. 
root.render(<Card />);