Reactjs 更改url，但不呈现视图

我正在做一个typescript作业，这是一个医生用来添加患者、诊断等的应用程序。我正在使用react路由器。路由器正在更改URL，但由于某种原因未呈现患者视图。我一直想弄明白这一点已经有一段时间了。有人能把我推到正确的方向吗？多谢各位

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;

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;

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

import React，{useState}来自“React”；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
从“语义ui”导入{按钮、分隔符、标题、容器}；
从“/constants”导入{apiBaseUrl}；
从“/state”导入{useStateValue}；
从“/types”导入{Patient}；
从“/PatientListPage”导入PatientListPage；
从“/components/PatientPage”导入PatientPage；
常量应用程序：React.FC=（）=>{
//const[，dispatch]=useStateValue（）；
常量[{patient}，dispatch]=useStateValue（）；
const[page，setPage]=useState（“”）；
React.useffect（（）=>{
get（`${apiBaseUrl}/ping`）；
const fetchPatientList=async（）=>{
试一试{
const{data:patientListFromApi}=wait axios.get(
`${apiBaseUrl}/api/patients`
);
分派（{type:“SET_PATIENT_LIST”，有效负载：patientListFromApi}）；
}捕获（e）{
控制台错误（e）；
}
};
fetchPatientList（）；
}，[发送]；
const showPatient=async（id:string）=>{
试一试{
const{data:patientFromApi}=wait axios.get（`${apiBaseUrl}/api/patients/${id}`）；
分派（{type:“GET_PATIENT”，有效负载：patientFromApi}）；
设置页面（patientFromApi.id）；
console.log（“患者”，患者）；
}捕获（错误）{
console.log（错误消息）；
}
}
返回(
病人
家
);
};
导出默认应用程序；

PatientListPage.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;

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;

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

从“React”导入React；
从“axios”导入axios；
从“语义ui react”导入{容器、表、按钮}；
从“./addPatientModel/AddPatientForm”导入{PatientFormValues}；
从“./AddPatientModel”导入AddPatientModel；
从“./types”导入{Patient}；
从“./constants”导入{apiBaseUrl}；
从“./组件/HealthRatingBar”导入HealthRatingBar；
从“./状态”导入{useStateValue}；
从“react router dom”导入{Link}；
const PatientListPage:React.FC=（{showPatient}）=>{
const[{patients，patient}，dispatch]=useStateValue（）；
const[modalOpen，setModalOpen]=React.useState（false）；
const[error，setError]=React.useState（）；
常量openModal=（）：void=>setModalOpen（true）；
const closeModal=（）：void=>{
setModalOpen（假）；
设置错误（未定义）；
};
const submitNewPatient=async（值：PatientFormValues）=>{
试一试{
const{data:newPatient}=wait axios.post(
`${apiBaseUrl}/api/patients`，
价值观
);
分派（{类型：“添加患者”，有效负载：newPatient}）；
closeModal（）；
}捕获（e）{
控制台错误（如响应数据）；
setError（如响应.数据.错误）；
}
};
返回(
病人名单
名称
性别
职业
健康评级
{Object.values（patients.map）（（patient:patient）=>(
showPatient（patient.id）}>
{患者名称}
{患者性别}
{患者职业}
))}
openModal（）}>添加新患者
);
};
导出默认PatientListPage；

PatientPage.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;

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;

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

import React，{useState}来自“React”；
从“../types”导入{Patient}；
从“./状态”导入{useStateValue}；
const PatientPage:React.FC=（）=>{
常量[{patient}，dispatch]=useStateValue（）；
返回(
姓名：{patient.name}
ssn:{patient.ssn}
职业：{患者职业}
)
}
导出默认页面

这可能是因为您没有使用确切的关键字，因此它将呈现PatientListPage组件

<Switch>
  <Route exact path="/">
    <PatientListPage showPatient={showPatient} />
  </Route>
  <Route path={`/${page}`}>
    <PatientPage />
  </Route>
</Switch>

---

更多信息

欢迎来到Stack Overflow！你能给我一份小费吗？那是小费，彼得，下次我会做得更好