Open komxvl opened 1 year ago
I create three components: import React from 'react'
export default function About() { return ( <div> <h1>About 1</h1> </div> ) }
export default function Contact() { return ( <div> <h1>Contact 1</h1> </div> ) }
export default function Home() { return ( <div> <h1>Home</h1> </div> ) }
My App is:
function App() { return ( <div className="App"> <Routes> <Route exact path="about" element={<About />} /> <Route exact path="contact" element={<Contact />} /> <Route exact path="home" element={<Home />} /> </Routes> </div> ); }
My index.js next:
const isMarkupPresent = document.getElementById("root"); if (!isMarkupPresent.hasChildNodes()) { const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode> ); } else { const container = document.getElementById("root"); ReactDOM.hydrateRoot(container, <BrowserRouter><App /></BrowserRouter>) }
My .rsp.jsom:
{ "port": 3001, "buildDirectory": "./build", "routes": [ "/", "/about", "/home", "/contact" ] }
I'm using
"react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.3",
I run next:
npm run build npm run postbuild serve -s build
After that when I visit /about and inspect source code I get empty root
I create three components: import React from 'react'
My App is:
My index.js next:
My .rsp.jsom:
I'm using
I run next:
After that when I visit /about and inspect source code I get empty root