React Router DOM Common Issues: Blank Pages and How to Solve Them - React Js [Solved]

#ReactJs #ReactRouterDomIssue #javascriptproblem
React Link Issue Sort out
If you are facing an issue with React Router Dom Link issue, as we import a link dom and convert a tag to Link Tag then it may Not Work, Follow the Videos Steps so your error can resolve.

Social Media Handles. 👇

[ElegantCoder]

thank you so much for the amazing tutorial It really helped me if you have hosted your website on Vercel you might face issues when you refresh the page it will show the page "NOT FOUND" To fix that Add a vercel.json file at the root of your project, and use "rewrites" to rewrite all incoming paths to refer to your index path.

{
"rewrites": [
{"source": "/(.*)", "destination": "/"}
]
}

[programmingholic]

Thank you for sharing, I was strugling to find this from yesterday.

[SherMuhammad-mo]

bhai still faceing usereff reading null error

[Guide__sensei]

I just recently install react and properly installed and running but when I edit some code not reflecting in browser or console pe error bhi nhi aa rha h

[Its_Me_WaliUllah]

issue is same but the solution you provide not working

[omkarwakchaure]

my page not display still


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='/' element={<AddContact/>}/>
<Route path='/' element={<ContactList/>}/>
{/* <AddContact
<ContactList contacts={contacts} */}
</Router>

</div>
);
}

export default App;