Nested React Router doesn't render component

Question

I have a problem in nested routing in React.js.

The presenter component has this.

<Route
    exact
    path={`/course/${id}/assignment`}
    render={(props) => (
        <CourseAssignments
            {...props}
            courseId={id}
            data={assignmentData}
        />
    )}
/>

And here is CourseAssignments component at /course/${id}/assignment.

const CourseAssignments: React.FC<RouteComponentProps & IProps> = ({
  courseId,
  data,
  match,
}) => {
  return (
    <Container>
      <Route
        exact
        path={match.path}
        render={(props) => (
          <AssignmentList {...props} courseId={courseId} data={data} />
        )}
      />
      <Route path={`${match.path}/:id`} component={AssignmentSubmit} />
    </Container>
  );
};

The AssignmentList renders well at course/0/assignment.

const AssignmentList: React.FC<RouteComponentProps & IProps> = ({
  match,
  courseId,
  data,
}) => {
  return (
    <div>
      {data.map((d) => (
        <div key={d.id}>
          <Link to={`${match.url}/${d.id}`}>{d.title}</Link>
        </div>
      ))}
    </div>
  );
};

I use <Link />, it links to course/0/assignment/:id.

But course/0/assignment/1 doesn't render AssignmentSubmit component.

I don't know why it doesn't work. Pleaze help.

(env is localhost)