Реагирует на изменения URL, но компонент не просматривает и не отображает

Question

Я пытаюсь сделать компонент (AllAssignments.jsx).Этот компонент содержит таблицу, которая заполняет некоторые данные, взятые из MongoDB, и будет отображаться с URL-адресом http://localhost:4000/instructor/IT17157124/assignments/update/

Вот снимок экрана для простоты понимания.

снимок экрана

И на скриншоте вы увидите Due Date, которые являются кликабельными ссылками на http://localhost:4000/instructor/:username/assignments/update/:assignmentID

например: - http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

, когда я нажимаю на любую датуссылка на него отображает другой компонент EditAssignmentDate.jsx, который позволяет пользователям редактировать дату.

Этот EditAssignmentDate.jsx будет отображаться с URL-адресом http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

, для простоты понимания здесь снова ссылки:

AllAssignments.jsx -

http://localhost:4000/instructor/IT17157124/assignments/update/

---

EditAssignmentDate.jsx - http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

Моя проблема: , когда я нажимаю Due Date, он рендерит соответствующий компонент, но когда я нажимаю navbar item, который должен направлять меня, и AllAssignments.jsx изменяет только URLно компонент не рендерится.Я все еще могу видеть EditAssignmentDate.jsx компонент

. Если бы я обновил страницу, он показывает компонент (AllAssignments.jsx).

Вот мой AllAssignment.jsx

import React, { Component } from "react";
import { Link, BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "react-datepicker/dist/react-datepicker.css";
import axio from "axios";
import EditAssignmentDate from "./instructor-edit-assignment-date";
import AllAssignmentsSubsidory from "./instructor-all-assignment-subsidory";

const ShowAssignments = props => (
  <tr>
    <td>{props.assignment.assignmentName}</td>
    <td>{props.assignment.assignmentDescription}</td>
    <td>{props.assignment.courseName}</td>
    <td>
      <Link
        to={`/instructor/IT17157124/assignments/update/${props.assignment._id}`}
      >
        {props.convertedDate}
      </Link>
    </td>
  </tr>
);

export default class AllAssignments extends Component {
  constructor(props) {
    super(props);

    this.state = {
      assignmentName: "",
      assignmentDescription: "",
      courseName: "",
      assignmentDueDate: "",
      allAssignments: []
    };
  }

  convertDateToString(date) {
    let today = new Date(date);

    let datee =
      parseInt(today.getMonth() + 1) +
      "/" +
      today.getDate() +
      "/" +
      today.getFullYear();

    var dateString = datee; // Oct 23
    return dateString;

    // var dateObject = new Date(dateString);
  }

  componentDidMount() {    
    axio
      .get("http://localhost:4000/courseweb/assignments")
      .then(res => {
        this.setState({
          allAssignments: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  getRows() {    
    return this.state.allAssignments.map((currentAssignment, id) => {
      return (
        <ShowAssignments
          assignment={currentAssignment}
          key={id}
          convertedDate={this.convertDateToString(
            currentAssignment.assignmentDueDate
          )}
        />
      );
    });
  }
  render() {
    return (
      <Router>
        <Switch>

          <Route
            exact
            path={`/instructor/IT17157124/assignments/update`}
            render={props => (
              <AllAssignmentsSubsidory
                {...props}
                username={this.props.username}
                getRows={this.getRows()}
              />
            )}
          />

          <Route
            /* path={`/instructor/IT17157124/assignments/update/:assignmentID`} */
            path='/instructor/IT17157124/assignments/update/:assignmentID'
            component={EditAssignmentDate}
          />
        </Switch>
      </Router>
    );
  }
}

А вот и мой EditAssignmentDate.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import axio from "axios";

export default class EditAssignmentDate extends Component {
  constructor(props) {
    super(props);

    this.state = {
      assignmentDueDate: new Date(),
      assignmentObject: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      assignmentDueDate: date
    });
  }

  componentDidMount() {
    console.log("Component did mount");
    axio
      .get(
        "http://localhost:4000/courseweb/assignments/update/" +
          this.props.match.params.assignmentID
      )
      .then(res => {
        let today = new Date(res.data.assignmentDueDate);

        let datee =
          parseInt(today.getMonth() + 1) +
          "/" +
          today.getDate() +
          "/" +
          today.getFullYear();

        var dateString = datee;
        this.setState({
            assignmentDueDate: new Date(dateString)
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  onSubmit(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div className="container">
        <h1>Edit Assignment Date {this.props.match.params.assignmentID}</h1>
        <br />
        <form>
          <div className="form-group">
            <label>Due Date:</label>{" "}
            <DatePicker
              className="form-control"
              selected={this.state.assignmentDueDate}
              onChange={this.handleChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

Может кто-нибудь подсказать, пожалуйста, где я ошибся?