(SOLVED) - Route is not loading component | React Router Dom | React JS | TheCoderUtkarsh

Route is not loading component in ReactJS. React JSX . Routes not rendering components.

In This Tutorial we are going to Learn About How to render component without having any error.
How To Handle Routing in React Apps with React Router,
In react Js, we render component using react router dom but sometimes it creates simple but not easy problems.
That made us somewhat worry. SO in this case TheCoderUtkarsh can help you out.

But don`t worry We are here to help you out in this tremendous situation.
Route is not loading component React Router Dom,
React-router is not displaying anything in the browser,
Routes not working in react router,
React Router Dom,
component not loading in reactjs,
How To Handle Routing in React Apps with React Router,
Inline Link in React,
React Link not working,
react Link not working,
React JSX Link Tag Error on Render,
React Component's Link style is not working,
Routes not rendering components when navigating,

ReactJs error Solution Playlist:

Do Subscribe to This Channel .

Use Comment or email or Instagram to raise any Query / Feedback / Issue / your coding error / problem .

Never forget to follow on Instagram:

Like and share to this Video and always share to friends and family.
#reactjstutorial #freecourse #beginners #hindi #tutorial #beginner
#webdevelopment #freecourse #reactjs

[AbuBakrUmer]

thanks you very much
ma booth parashan tha khi sa bhi solution nhi mil rah tha ap ki video dakh kr meri problem solve ho gy ha.

[patel__roma]

3 hours pareshan hone ke baad finally here i got solution thank you so much ...goog job keep it up

[manojkumargiri]

thank you so much. you saved a lot of time for me.😄

[sanyamsharma]

Thank you so much, after you have finally solved my problem

[rashikasinghal]

Thankyou bro your video is very helpful for me

[vineetkumar-bfje]

thank you so much bro it was really helpful

[mdjawaid]

Context provider pr b kaam ni kr rha h solution batao

[neetukumari]

thank you and yes subscribed. keep it up. bless you.

[samiji]

please help getting blank screen /
/ App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import BooksPage from './pages/BooksPage';
import BookDetailsPage from './pages/BookDetailsPage';
import QuotesPage from './pages/QuotesPage';
import Navigation from './components/Navigation';

function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/" element={<BooksPage />} />
<Route path="/about" element={<QuotesPage />} />
<Route path="/contact" element={<BookDetailsPage />} />
</Routes>
</Router>
</>
);
}

export default App;

[mukundshukla]

Still not working


import './App.css';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import Home from './pages/Home';
import BookingCar from './pages/BookingCar';
function App() {
return (
<div className="App">
<BrowserRouter>
<h1>hello</h1>
<Routes>
<Route path='/' exact element={Home} />
<Route path='/login' exact element={Login} />
<Route path='/register' exact element={Register} />
<Route path='/bookingcar' exact element={BookingCar} />
</Routes>
</BrowserRouter>
</div>
);
}

export default App;

[omkarwakchaure]

my pag still not displaying
import React, {useState, useEffect} from 'react';
import{BrowserRouter as Router, Switch, Route} from "react-router-dom";
import {v4 as uuid} from 'uuid';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
import ContactList from './ContactList';

function App() {
const LOCAL_STORAGE_KEY = "contacts";
const [contacts, setContacts] = useState([]);

const addContactHandler = (contact) =>{
console.log(contact);
setContacts([...contacts, {id:uuid(), ...contact}]);
};
const removeContactHandler = (id) => {
const newContactList = contacts.filter((contact) => {
return contact.id !== id;
});

setContacts(newContactList);
};

useEffect(() =>{
const retriveContacts =
if(retriveContacts)
}, []);

useEffect(() =>{
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);
return (

<div className='ui container'>
<h1>jdsbd</h1>



<Router>
<Header/>
<Route path='/add' element={<AddContact/>}/>
<Route path='/' element={<ContactList/>}/>
{/* <AddContact
<ContactList contacts={contacts} */}
</Router>

</div>
);
}

export default App;