javascript - 路由不渲染组件

Question

我尝试在以下代码中使用 react 路由器，并在单击按钮时呈现 CourseDetail 组件。但是，不会呈现任何内容(仅转到相应的 URL)。

我不想将它与所有其他路由一起放入我的 App.js 文件中，因为我想在这个特定的父组件中使用 props。如有任何帮助，我们将不胜感激!

同时编辑:${match.url}给出/student/courses

import {
  BrowserRouter,
  Route,
  Switch,
  withRouter,
  Link,
} from "react-router-dom";
import { Card, Button } from "react-bootstrap";
import "./style.css";
import CourseDetail from "./CourseDetail";

class CourseItem extends React.Component {
  render() {
    const { course, match } = this.props;
    return (
      <div>
        <Card style={{ width: "18rem" }}>
          <Card.Body>
            <Card.Title>
              {course.subject} {course.code}: {course.name}
            </Card.Title>
            <Button variant="primary">
              <Link to={`${match.url}/${course.subject}${course.code}`}>
                Access Course
              </Link>
            </Button>
          </Card.Body>
        </Card>
        <BrowserRouter>
          <Switch>
            <Route
              exact
              path="/student/courses/:course"
              render={(props) => <CourseDetail {...props} course={course} />}
            />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default withRouter(CourseItem);

类(class)项目由类(class)列表呈现:

import React from "react";
import { withRouter } from "react-router-dom";
import Header from "../../../components/Header";
import CourseItem from "./CourseItem";
import { CardDeck, Container } from "react-bootstrap";
import axios from "axios";

class CourseList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      courses: [],
      isLoading: false,
      error: "",
    };
  }


  render() {
    const { courses } = this.state;
    return (
      <div className="course-list">
        <Header title="Courses & Labs" />
        <Container>
          <CardDeck>
            {courses &&
              courses.map((course) => {
                return <CourseItem course={course} />;
              })}
          </CardDeck>
        </Container>
      </div>
    );
  }
}

export default withRouter(CourseList);

应用程序呈现类(class)列表:

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import data from "./data.json";
import Navigation from "./components/Navigation";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import About from "./pages/About";
import Research from "./pages/Research";
import Publications from "./pages/Publications";
import HallOfFame from "./pages/HallOfFame";
import EvaluationList from "./pages/Student/TAEvaluations/EvaluationList";
import CourseList from "./pages/Student/Courses/CourseList";
import CourseDetail from "./pages/Student/Courses/CourseDetail";
import CourseEditorList from "./pages/Prof/CourseEditor/CourseEditorList";
import CourseEditorDetail from "./pages/Prof/CourseEditor/CourseEditorDetail";
import EvaluationEditorList from "./pages/Prof/EvaluationEditor/EvaluationEditorList";
import EvaluationEditorDetail from "./pages/Prof/EvaluationEditor/EvaluationEditorDetail";
import ReportList from "./pages/Prof/ReportEditor/ReportList";
import ReportDetail from "./pages/Prof/ReportEditor/ReportDetail";

class App extends React.Component {
  render() {
    const mockCourses = data.Courses;

    return (
      <div className="App">
        <BrowserRouter>
          <Navigation />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/research" component={Research} />
            <Route path="/publications" component={Publications} />
            <Route path="/halloffame" component={HallOfFame} />
 
            <Route exact path="/student/courses" component={CourseList} />
          </Switch>
        </BrowserRouter>
        <Footer />
      </div>
    );
  }
}

export default App;

Answer 1

问题

<Route exact path="/student/courses" component={CourseList} />意味着一旦您推送到新路线，它就不再匹配，因此不会呈现 CourseList不再意味着 "/student/courses/:course" 的路线也未安装并且不会渲染任何内容。

解决方案

CourseDetail将收到course作为给定路径定义 "/student/courses/:course" 的路由匹配参数的支柱.

props.match.params.course

继续在主路由器中定义其路由。删除exact prop 并将较不具体的路径之前定义为 Switch仅返回第一个匹配项。

class App extends React.Component {
  render() {
    const mockCourses = data.Courses;

    return (
      <div className="App">
        <BrowserRouter>
          <Navigation />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/research" component={Research} />
            <Route path="/publications" component={Publications} />
            <Route path="/halloffame" component={HallOfFame} />
 
            <Route
              path="/student/courses/:course"
              component={CourseDetail}
            />
    
            <Route path="/student/courses" component={CourseList} />
          </Switch>
        </BrowserRouter>
        <Footer />
      </div>
    );
  }
}

从 CourseItem 中删除路由器，主路由器现在可以处理该路由/路径。

class CourseItem extends React.Component {
  render() {
    const { course, match } = this.props;
    return (
      <div>
        <Card style={{ width: "18rem" }}>
          <Card.Body>
            <Card.Title>
              {course.subject} {course.code}: {course.name}
            </Card.Title>
            <Button variant="primary">
              <Link to={`${match.url}/${course.subject}${course.code}`}>
                Access Course
              </Link>
            </Button>
          </Card.Body>
        </Card>
      </div>
    );
  }
}

重构CourseDetail拉course来自匹配参数与 props 根。实现适当的生命周期函数来处理 course prop 值更新，例如，如果用户从 "/student/courses/ABC" 进入至"/student/courses/DEF"直接直接进行，无需先前往不同的路线/路径。

class CourseDetail extends Component {

  ...

  componentDidMount() {
    const {
      match: {
        params: {
          course,
        },
      },
    } = this.props;
    // use `course` to load the correct course content
    
    ...
  }

  ...

  componentDidUpdate(prevProps) {
    const {
      match: {
        params: {
          course,
        },
      },
    } = this.props;

    const {
      match: {
        params: {
          course: prevCourse,
        },
      },
    } = prevProps;

    if (prevCourse !== course) {
      // use `course` to reload the correct course content
    }
    
    ...
  }
  
  ...
}

注意:如果您可以提供您的CourseDetail组件代码我可以提供更准确的建议，以上只是粗略的估计。