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

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": "/"}
]
}

It works, thank you so much.

It worked thanks for sharing

It work

Bevarsi

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 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));

if(retriveContacts) setContacts(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 addContactHandler={addContactHandler}/>

<ContactList contacts={contacts} getContactId={removeContactHandler}/> */}

</Router>

</div>

);

}

export default App;

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