Matched leaf route at location - reactjs

Question

// I don't know why I am getting this error.
// When I tried to Route using element,
// I was able to use the routes.
// But when I tried using render inside the route to use component
// along with props I am getting error as below-
.
// "When I try to go to "localhost:3000" I get an error saying-
// Error:
// Matched leaf route at location / does not have an element. This means it will render an
// "" with a null value by default resulting in an "empty" page.
// Also, And I am unable to get my "contact list" and also add contact form."
1.This is my App.js
-----------------------------------------------------
function App() {
const LOCAL_STORAGE_KEY='contacts';
const [contacts,setContacts]=useState([]);
const addContactHandler=(contact)=>{
console.log(contact);
setContacts([...contacts,{id:uuidv4(), ...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="">
<Router>
<Header/>
<Routes>
<Route
exact path="/"
render={(props)=>(
<ContactList
{...props}
contacts={contacts}
getContactId={removeContactHandler}
/>
)}
/>
<Route exact path="/add"
render={(props)=>(
<AddContact {...props} addContactHandler={addContactHandler}
/>
)}
/>
{/* <Route exact path="/add" element= {<AddContact
addContactHandler={addContactHandler}/>}/>
<Route
exact path="/"
element={
<ContactList
contacts={contacts}
getContactId={removeContactHandler}/>}/> */}
</Routes>
</Router>
</div>
);
}
export default App;
2.This is my AddContact.js
It consists of basic form submit methods using states.
-----------------------------------------------------------------------------
class AddContact extends React.Component{
state={
name:"",
email:"",
};
add=(e)=>{
e.preventDefault();
if(this.state.name==="" || this.state.email===""){
alert("All the input fields are empty!");
return;
}
this.props.addContactHandler(this.state);
this.setState({name:"",email:""});
}
render(){
return(
<>
<form className="form-group" onSubmit={this.add}>
<div className="column">
<label for="name">Full Name</label>
<input
type="text"
className="form-control"
id="fullname"
placeholder="Full Name"
onChange={(e)=>this.setState({name:e.target.value})}/>
</div>
<div className="form-group ">
<label for="email">Email address</label>
<input
type="email"
className="form-control"
id="email"
aria-describedby="emailHelp"
placeholder="Enter email"
onChange={(e)=>this.setState({email:e.target.value})}/>
</div>
<br/>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</>
)
}
}
export default AddContact
-----------------------------------------------------------------
3.This is my ContactList.js
---------------------------------------------------------------
const ContactList = (props) => {
console.log(props);
const deleteContactHandler=(id)=>{
props.getContactId(id);
};
const renderContactList = props.contacts.map((contact)=>{
return(
<ContactCard
contact={contact}
clickHandler={deleteContactHandler}
key={contact.id}/>
)
})
return (
<>
<br/>
<div className=''>
<h2>Contact List</h2>
<Link to="/add">
<button className='btn btn-warning mb-2'>Add Contacts</button>
</Link>
{renderContactList}
</div>
</>
)
}
export default ContactList;
-----------------------------------------------------------

Answer 1

In react-router-dom#6 there are no longer any route props and the Route component API changed, there are no longer any component and render and children function props. They were replaced by a single element prop taking a ReactNode, a.k.a. JSX, as a value.
Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
By using a non-existent prop, i.e. render, no content was returned to be rendered on the currently matching "/" path.
Use the element prop for all routed content.
Example:
<Router>
<Header/>
<Routes>
<Route
path="/"
element={(
<ContactList
contacts={contacts}
getContactId={removeContactHandler}
/>
)}
/>
<Route
path="/add"
element={<AddContact addContactHandler={addContactHandler} />}
/>
</Routes>
</Router>