ReactJs, update state after redirect - reactjs

Question

I have a problem with updating the state of a component after a redirect. Actually I have two components getItems.js and addItem.js
App.js
const [item, setItem] = useState([]);
useEffect(() => {
const fetch = () => {
axios.get('localhost:3000/api/get_all.php')
.then(response => {
setItems(response.data);
}).catch(error => {
console.log(error)
})
}
fetch();
}, [])
return (
<BrowserRouter>
<div className="container">
<Routes
<Route path="/" element={<getItems items={items}/>} />
<Route path='/add-item' element={<addItem />} />
</Routes>
</div>
</BrowserRouter>
)
getItems.js
This component is used to display each item from App.js
addItem.js
const onSubmit = (event) => {
const item = {
...
}
axios.post('localhost:3000/api/add_item.php', item)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
})
}
On App.js I have a button to direct to add-item page, once I save the item and redirect to App.js page the items state is not updated, only if I reload the entire page.

Answer 1

You need to set the state after adding an item. Since your logic is separated in two routes, you will have to use a contextProvider
Basically, it allows you to share state anywhere in your app.
ContextProvider.js
//Set initial value. We wont use it but we need t odefined it here
export const ContextProvider = createContext({
items: undefined
setItems: () => {}
});
App.js
export const App = () => {
const [items, setItems] = useState([])
//Pass state to context
const contextValue = {
items: items,
setItems: setItems,
};
useEffect(() => {
const fetch = () => {
axios.get('localhost:3000/api/get_all.php')
.then(response => {
setItems(response.data);
}).catch(error => {
console.log(error)
})
}
fetch();
}, [])
return (
<ContextProvider.Provider value={contextValue}>
<BrowserRouter>
<div className="container">
<Routes
<Route path="/" element={<getItems/>} />
<Route path='/add-item' element={<addItem />} />
</Routes>
</div>
</BrowserRouter>
</ContextProvider.Provider>
)
};
GetItems.js
//instead of prop.items
const {items} = useContext(Contextprovider)
addItem.js
const {items, setitems} = useContext(Contextprovider)
axios.post('localhost:3000/api/add_item.php', item)
.then(response => {
console.log(response.data);
//Validate if item is added
if(response.data) {
//Push new item to list
setItem([...item, response.data])
}
})
.catch(error => {
console.log(error);
})