Question

我的代码有问题-我不知道如何解决-我试了几个小时-它不起作用。

我不知道发生了什么。我只是想从课程的一部分-以及一门课程的一部分中访问。

我收到此错误：

这是我到目前为止写下的代码-不是很长的代码。

course.js：

import React, { Component } from 'react';

class Course extends Component {
    render() {
        return (
            <div>
                <h1>this.props.location.title</h1>
                <p>You selected the Course with ID: {this.props.match.params.id}</p>
            </div>
        );
    }
}

export default Course;

courses.js：

import React, { Component } from 'react';

import './Courses.css';

import { Link } from "react-router-dom";

class Courses extends Component {
    state = {
        courses: [
            { id: 1, title: 'Angular - The Complete Guide' },
            { id: 2, title: 'Vue - The Complete Guide' },
            { id: 3, title: 'PWA - The Complete Guide' }
        ]
    }

    render() {
        return (
            <div>
                <h1>Amazing Udemy Courses</h1>
                <section className="Courses">
                    {
                        this.state.courses.map(course => {
                            return (
                                <Link
                                    key={course.id}
                                    to={{
                                        pathname: this.props.match.url + "/" + course.id,
                                        title: course.title
                                    }}>
                                    <article className="Course">{course.title}</article>
                                </Link>
                             )
                        })
                    }
                </section>
            </div>
        );
    }
}

export default Courses;

app.js：

import React, { Component } from 'react';

import Courses from './containers/Courses/Courses';
import Users from './containers/Users/Users';
import { NavLink, BrowserRouter, Switch, Route } from "react-router-dom";

import './App.css';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <header>
            <nav>
              <ul>
                <li>
                  <NavLink
                    to="/users"
                    exact
                    activeClassName="my-active"
                    activeStyle={{
                      color: '#fa923f',
                      textDecoration: 'underline'
                    }}>Users
                    </NavLink>
                </li>
                <li>
                  <NavLink to={{
                    pathname: '/courses',
                    hash: '#submit',
                    search: '?quick-submit=true'
                  }}>Courses
                  </NavLink>
                </li>
              </ul>
            </nav>
          </header>


          <Switch>
            <Route exact path="/">
            </Route>
            <Route path="/users">
              <Users />
            </Route>
            <Route path="/courses">
              <Courses />
            </Route>
          </Switch>
          <ol style={{ textAlign: 'left' }}>
            <li>Pass the course ID to the "Course" page and output it there</li>
            <li>Pass the course title to the "Course" page - pass it as a param or score bonus points by passing it as query params (you need to manually parse them though!)</li>
            <li>Load the "Course" component as a nested component of "Courses"</li>
            <li>Add a 404 error page and render it for any unknown routes</li>
            <li>Redirect requests to /all-courses to /courses (=> Your "Courses" page)</li>
          </ol>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Answer 1

您正尝试使用来自app.js文件的语法访问来自React Router的道具，而没有传递任何道具。为了能够将React Router Props传递给您的组件，您可以改用以下语法：

<Route path="/courses" component={Courses} />

因此，每次您访问一个链接时，都会带您到这些课程，您将从组件中获得来自React Router的所有道具。

这是一个沙箱，其中包含一个使用该语法获取所有路由器道具的组件示例，而另一个使用您正在使用的语法且无法访问路由器道具的组件的示例： Sandbox with example

我正在使用功能组件，但以您的示例为例进行操作。props会给路由器props包括match对象。我认为您的课程组件是一类，这是最简单的方法，您也可以将组件包装在withRouter HOC中以完成相同的操作： WIth router docs

Answer 2

您需要在子组件中设置道具，以使其可用，就像这样...

<Courses
    match={this.props.match}
/>

现在，您只有<Courses />，没有传递道具。因此，在Courses类中，您当然会收到以下消息：Cannot read property 'url' of undefined在您调用<Link ....this.props.match.....>时。

但是，如果您传递match这样的match={this.props.match}道具，就不会再出现此错误。

看看ReactJS文档中道具如何工作...

但是，元素也可以代表用户定义的组件：

const element = <Welcome name="Sara" />;

当React看到代表用户定义组件的元素时，它将JSX属性和子代作为单个对象传递给该组件。 我们将此对象称为“道具”。

来源：ReactJS.org: Components and Props

不能使用儿童道具做出反应

2 个答案: