Question 190297 in Html Question posted in
Some basic documentation can be found here.

Html – My react-app doesn't render any single element but it compiled successfully and no error

indes.js (npm start this file)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root') // Use getElementById with the id attribute of the target element
);

the routes.js file for routing

import React from 'react';
import { Routes ,Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contacts';
import NotFound from './components/NotFound';

const Rooutes = () => {
   return (
     <Routes>
       <Route exact path="/" element={Home} />
       <Route path="/about" element={About} />
       <Route path="/contact" element={Contact} />
       <Route element={NotFound} />
     </Routes>
   );
};
 
export default Rooutes;

and one html file of used ones like this:

import React from 'react';

const About = () => {
 return (
   <>
     h1 about Component
   </>
 );
};

export default About;

everything just works perfectly. no errors detected and the npm compiles successfully but no html element is rendered to the browser, any advice/help?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    resoved it, I forgot to fukin return it in

        function App() { 
    return (
        <Routes>
            <Route exact path='/' element={<Home/>} />
            <Route exact path='/about' element={<About/>}/>
        </Routes>
    )
};

  2. 0

    it will work if you do this

    <Route exact path="/" element={<Home/>} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search