Question

在下面的代码中，代替在“访问代码”（在CourseItem中）的按钮单击上呈现“ CourseDetail”组件，它重新呈现了CourseList。我认为这是因为我忘记了它的Route组件中的“精确”位置，但是它在那里并且应该可以正常工作。我正在阅读一些有关反应历史的信息，尽管从我读过的所有其他内容来看，我应该能够在没有历史的情况下做到这一点。任何帮助表示赞赏！

App.js：

class App extends React.Component {
  render() {
    const courses = ["COMP206", "COMP273"];
    return (
      <div>
        <BrowserRouter>
          <TopNav />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" component={About} />
            <Route path="/research" component={Research} />
            <Route path="/publications" component={Publications} />
            <Route path="/halloffame" component={HallOfFame} />
            <Route path="/login" component={Login} />
            <Route
              path="/student/courses"
              exact
              render={(props) => <CourseList {...props} courses={courses} />}
            />
            <Route path="/student/courses/:course" component={CourseDetail} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

CourseList.js：

class CourseList extends React.Component {
  render() {
    const { courses } = this.props;
    const renderedList = courses.map((course, i) => {
      return <CourseItem key={i} course={course} />;
    });
    return (
      <div className="course-list">
        <CardDeck>{renderedList}</CardDeck>
      </div>
    );
  }
}

CourseItem.js：

class CourseItem extends React.Component {
  render() {
    const { course } = this.props;

    return (
      <div>
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src="holder.js/100px180" />
          <Card.Body>
            <Card.Title>{course}</Card.Title>
            <Card.Text>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </Card.Text>
            <Button variant="primary">
              <Link to={`/student/courses/${course}`}> Access Course</Link>
            </Button>
          </Card.Body>
        </Card>
      </div>
    );
  }
}

CourseDetail

class CourseDetail extends React.Component {
  render() {
    console.log("rendered course detail");

    return <div>Course Detail</div>;
  }
}

export default CourseDetail;
``

Answer 1

您需要更改此内容：

<Route path="/student/courses/:course" component={CourseDetail} />

成为：<Route exact path="/student/courses/:course" component={CourseDetail} />

exact关键字不同。

目前您的代码看到了/student/courses/，并在有机会到达最终路线之前对其进行了渲染

Answer 2

正如我在评论中提到的

使用courseDetail组件中的完全关键字更改路线声明的顺序，

       <Route
          path="/student/courses"
          exact
          render={(props) => <CourseList {...props} courses={courses} />}
        />
        <Route path="/student/courses/:course" component={CourseDetail} />
      </Switch>

到

        <Route exact path="/student/courses/:course" component={CourseDetail} />
        <Route
          path="/student/courses"
          exact
          render={(props) => <CourseList {...props} courses={courses} />}
        />

      </Switch>

它将起作用。干杯！

Answer 3

问题是您在CourseItem组件中有一个Link，但是它没有收到Router道具，因此导航无法正常工作

您可以使用withRouter HOC包装courseItem组件，它应该可以工作

class CourseItem extends React.Component {
  render() {
    const { course } = this.props;

    return (
      <div>
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src="holder.js/100px180" />
          <Card.Body>
            <Card.Title>{course}</Card.Title>
            <Card.Text>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </Card.Text>
            <Button variant="primary">
              <Link to={`/student/courses/${course}`}> Access Course</Link>
            </Button>
          </Card.Body>
        </Card>
      </div>
    );
  }
}

export default withRouter(CourseItem);

路由器重新渲染当前组件，而不是渲染与所需路径匹配的组件

3 个答案: