React router changing the url, but not rendering the view - reactjs

Question

I am doing a typescript assignment, which is an app for a doctor to add patients, diagnoses and so on. I am using react-router. The router is changing the URL, but not rendering the patient view for some reason. I have been trying to figure this out for a while now. Can someone push me into the right direction? Thank you.
App.tsx
import React, { useState } from "react";
import axios from "axios";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Button, Divider, Header, Container } from "semantic-ui-react";
import { apiBaseUrl } from "./constants";
import { useStateValue } from "./state";
import { Patient } from "./types";
import PatientListPage from "./PatientListPage";
import PatientPage from "./components/PatientPage";
const App: React.FC = () => {
//const [, dispatch] = useStateValue();
const [{ patient }, dispatch] = useStateValue();
const [page, setPage] = useState('');
React.useEffect(() => {
axios.get<void>(`${apiBaseUrl}/ping`);
const fetchPatientList = async () => {
try {
const { data: patientListFromApi } = await axios.get<Patient[]>(
`${apiBaseUrl}/api/patients`
);
dispatch({ type: "SET_PATIENT_LIST", payload: patientListFromApi });
} catch (e) {
console.error(e);
}
};
fetchPatientList();
}, [dispatch]);
const showPatient = async (id: string) => {
try {
const { data: patientFromApi } = await axios.get<Patient>(`${apiBaseUrl}/api/patients/${id}`);
dispatch({ type: "GET_PATIENT", payload: patientFromApi });
setPage(patientFromApi.id);
console.log('patient', patient);
} catch (error) {
console.log(error.message);
}
}
return (
<div className="App">
<Router>
<Container>
<Header as="h1">Patientor</Header>
<Button as={Link} to="/" primary>
Home
</Button>
<Divider hidden />
<Switch>
<Route path="/">
<PatientListPage showPatient={showPatient} />
</Route>
<Route path={`/${page}`} >
<PatientPage />
</Route>
</Switch>
</Container>
</Router>
</div>
);
};
export default App;
PatientListPage.tsx
import React from "react";
import axios from "axios";
import { Container, Table, Button } from "semantic-ui-react";
import { PatientFormValues } from "../AddPatientModal/AddPatientForm";
import AddPatientModal from "../AddPatientModal";
import { Patient } from "../types";
import { apiBaseUrl } from "../constants";
import HealthRatingBar from "../components/HealthRatingBar";
import { useStateValue } from "../state";
import { Link } from "react-router-dom";
const PatientListPage: React.FC<{ showPatient: any }> = ({ showPatient }) => {
const [{ patients, patient }, dispatch] = useStateValue();
const [modalOpen, setModalOpen] = React.useState<boolean>(false);
const [error, setError] = React.useState<string | undefined>();
const openModal = (): void => setModalOpen(true);
const closeModal = (): void => {
setModalOpen(false);
setError(undefined);
};
const submitNewPatient = async (values: PatientFormValues) => {
try {
const { data: newPatient } = await axios.post<Patient>(
`${apiBaseUrl}/api/patients`,
values
);
dispatch({ type: "ADD_PATIENT", payload: newPatient });
closeModal();
} catch (e) {
console.error(e.response.data);
setError(e.response.data.error);
}
};
return (
<div className="App">
<Container textAlign="center">
<h3>Patient list</h3>
</Container>
<Table celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Gender</Table.HeaderCell>
<Table.HeaderCell>Occupation</Table.HeaderCell>
<Table.HeaderCell>Health Rating</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{Object.values(patients).map((patient: Patient) => (
<Table.Row key={patient.id} onClick={() => showPatient(patient.id)}>
<Link to={`/${patient.id}`}>
<Table.Cell>{patient.name}</Table.Cell>
</Link>
<Table.Cell>{patient.gender}</Table.Cell>
<Table.Cell>{patient.occupation}</Table.Cell>
<Table.Cell>
<HealthRatingBar showText={false} rating={1} />
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
<AddPatientModal
modalOpen={modalOpen}
onSubmit={submitNewPatient}
error={error}
onClose={closeModal}
/>
<Button onClick={() => openModal()}>Add New Patient</Button>
</div>
);
};
export default PatientListPage;
PatientPage.tsx
import React, { useState } from "react";
import { Patient } from '../types';
import { useStateValue } from "../state";
const PatientPage: React.FC = () => {
const [{ patient }, dispatch] = useStateValue();
return (
<>
name: {patient.name}
ssn: {patient.ssn}
occupation: {patient.occupation}
</>
)
}
export default PatientPage

Answer 1

It might be because you have not used the exact keyword, so its rendering the PatientListPage component instead.
<Switch>
<Route exact path="/">
<PatientListPage showPatient={showPatient} />
</Route>
<Route path={`/${page}`}>
<PatientPage />
</Route>
</Switch>
More information here

Answer 2

First Solution and Best Solution:
If you use are using React Router 5.3.x, check whether it is 5.3.3 in your package.json file.
If it is not 5.3.3 uninstall the last version then install the bug-free version which has been resolved by John and updated in version 5.3.3.
npm uninstall -S react-router-dom
npm install -S react-router-dom#5.3.3
Second Solution:
React has launched its StrictMode in its latest update.
you can see it in an index.js file
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
So here your React Router is in the child component. And we have to make it a parent component.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);
Third Solution:
Remove the Strict mode from the index.js file
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);