反应：动态嵌套路由中的问题。 如何解决这个错误？

Question

I am getting the following error while trying to implement dynamic routing in React JS.

The required files are:

Assignment.js

import React, { Component } from 'react';
import Users from './containers/Users/Users';
import Courses from './containers/Courses/Courses';
import {Route, Link, Switch, Redirect} from 'react-router-dom';
import Course from './containers/Course/Course';

class Assignment extends Component{
    render(){
        return(
            <div>
                <ul>
                    <li><Link to ="/Users"> Users </Link></li>
                    <li><Link to ="/Courses"> Courses </Link></li>
                </ul>
             <Switch>
             <Route path ="/Users" component = {Users}/>
             <Route path ="/Courses" exact component = {Courses}/>  
             </Switch>
            </div>
        )
    }
};

export default Assignment;

Courses.js

import React, { Component } from 'react';
import {Link, Route} from 'react-router-dom';
import './Courses.css';
import Course from '../Course/Course';
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 = {this.props.match.url + '/' + course.id + '/' + course.title}>
                            <Course className = "Course" name = {course.title} no = {course.id} />
                            </Link>);
                        } )
                    }
                    <Route path = "/Courses/:id/:name" exact component = {Course} />
                </section>
            </div>
        );
    }
}

export default Courses;

Course.js

import React, { Component } from 'react';

class Course extends Component {
    render () {
        return (
            <div>
                <h1>{this.props.match.params.name}</h1>
                <p>{this.props.match.params.id}_</p>
            </div>
        );
    }
}

export default Course;

Why am I getting this error? Can anyone fix this? I am also finding it difficult to following dynamic routing. PS. I am getting the error at /Courses url only not at the base url.

Answer 1

Problems

The props such as params are only passed down to the top-level component which is rendered by a Route . When you are rendering the list of individual Course components inside your Course component, the Courses gets this.props.params but each Course does not. You can pass them down manually:

<Course {...this.props} className="Course" name={course.title} no={course.id} />

The above passes all props, while the below passes just the params prop.

<Course params={this.props.params} className="Course" name={course.title} no={course.id} />

This resolves your error, but it is not at all doing what you want it to be doing. The match is for the current URL, so this.props.match.params.name and this.props.match.params.id are both empty values when we are on the /Courses page. Meanwhile, the props className , name , and no which you set on the Course are all unused.

Additionally, the Route to "/Courses/:id/:name" which you have put inside of Courses should really be on the top level of the app alongside the main "/Courses" Route . Ideally it should be listed before the courses homepage route because you want to match to more specific paths before broader ones, but it won't present any conflicts with exact either way.

There is a lot wrong here and I recommend that you read up on the fundamentals of react-router and writing reusable components.

Rewrites

You are trying to use the same component to render a course for both your Route "/Courses/:id/:name" and as a list item on the Courses page, but one needs to have its data passed directly as props while the other gets its data from this.props.match.params . In order to solve this, we will make a component that handles just the rendering of the course. It gets its information from props, and is agnostic to where those props come from. This means we can use this component on any page of your app as long as we pass it a name and no . I used a function component, but it doesn't matter.

const CourseListItem = ({ name, no }) => {
  return (
    <div className="course">
      <h1>{name}</h1>
      <p>Course #{no}</p>
    </div>
  );
};

We can't send our Route directly to this component, because it wouldn't know the name and no . So we use an intermediate component that is responsible for setting the props of CourseListItem based on the router props ( this.props.match.params ). You could of course render other HTML or components and not just CourseListItem . I used a class for consistency with what you had before, but again it doesn't matter.

class SingleCoursePage extends Component {
  render() {
    return (
      <CourseListItem
        name={this.props.match.params.name}
        no={this.props.match.params.id}
      />
    );
  }
}

In our Courses component, we loop through the courses from this.state and for each course we render the CourseListItem , setting the props name and no from the course object. See how we can use same component in different ways? If you wanted, you could make className be a prop of CourseListItem so that you could style it differently in different places.

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={"/Courses/" + course.id + "/" + course.title}
              >
                <CourseListItem name={course.title} no={course.id} />
              </Link>
            );
          })}
        </section>
      </div>
    );
  }
}

As I explained, we are moving that Route for the single course page up to the top-level component, alongside the other routes.

class Assignment extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to="/Users">Users</Link></li>
            <li><Link to="/Courses">Courses</Link></li>
          </ul>
          <Switch>
            <Route path="/Users" component={Users} />
            <Route path="/Courses/:id/:name" component={SingleCoursePage} />
            <Route path="/Courses" exact component={Courses} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

Code Sandbox Link - There's no CSS styling but all of the routing works!

Answer 2

Have you tried withRouter?

import { withRouter } from 'react-router-dom';
console.log(props.match.params);

then export the component like:

export default withRouter(TestComponent);