React Router v4 - Redirect and Rendering Issue on Refresh

Question

First of all,

• I am NEW to JS and React ( 3 months since I start learning JS ).
• React Router v4 is used ( due to the course's restriction )
• No Redux nor React Hooks used ( I didn't learn these yet )

If a user refreshes the window, it stays on the same address - I think it's technically the same as when you append keywords(route) on the address bar and push enter key - ( if you don't use redirect or anything modifies the route ), which has benefits on particular situations; however, the downside would be my case( not sure if it's actually true..please let me know if I am wrong ).

---

- I want to achieve three goals,

• 1a. the route path is matched to keyword state, which initial state is cats and which is the same as the user-input when a user submits an input value

• 2a. when a user refreshes the window, it goes back to initial componentDidMount state ( redirect to /cats )

• 3a. when a user types an address that does not exist, the 404 error component is rendered

- The issue I have to achieve those goals is,

• 1b. If I use Redirect to achieve "2a", and then if I type non-existing routes ( such as "/catsasldkja" ), it does not show 404 error component and redirects to /cats

• 2b. If I use Switch component to achieve "3a", it renders 404 error component as expected; however, it stays on the same address, so when a user is on the /cats address and refreshes the window, it works well, but when a user is on other routes(addresses) such as /dogs or /brandon, it renders the 404 error component: PageNotFound.js, because the keyword state is rolled back to initial state, which is cats, but the path is still on /brandon for instance, and the keyword state does not match to the route path, /cats so it renders 404 component

How can I possibly solve this issue?

Here is my Git Repo and Live Link

Thank you so much for your time in advance!