Question

Instructor.jsx

import React, { Component } from 'react'
import ListCoursesComponent from './ListCoursesComponent'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import CourseComponent from './CourseComponent';

export default class extends Component {
    render() {
        return (
            <Router>
                <h1>Instructor Application</h1>
                <Switch>
                    <Route exact path="/" component={ ListCoursesComponent }/>
                    <Route exact path="/courses" component=ListCoursesComponent }/>
                    <Route path="courses/:id" component={ CourseComponent }/> 
                </Switch>
            </Router>
        )
    }
}

ListCoursesComponent.js

import React, { Component } from 'react'
import CourseDataService from '../service/CourseDataService';

const INSTRUCTOR = 'in28minutes'
export default class ListCoursesComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            courses: [],
            message: null
        }
        this.refreshCourses = this.refreshCourses.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleUpdate = this.handleUpdate.bind(this)
    }

    componentDidMount(){
        this.refreshCourses();
    }

    refreshCourses(){
        CourseDataService.retrieveAllCourses(INSTRUCTOR)
            .then(
            Response => {
                console.log(Response);
                this.setState({ courses: Response.data })
            }
        )
    }

    handleDelete(id){
        CourseDataService.deleteCourse(INSTRUCTOR, id).then(Response=>{
            this.setState({
                message: `Delete of course ${id} successful`
            })
            this.refreshCourses();
        })
    }

    handleUpdate(id){
        console.log('update '+id)
        this.props.history.push(`/courses/${id}`)
    }

    render() {
        return (
            <div className="container">
                <h3>All courses</h3>
                {this.state.message && <div className="alert alert-success">{ this.state.message }</div>}
                <div className="container">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Description</th>
                                <th>Delete</th>
                                <th>Update</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.courses.map(course =>
                                    <tr key={course.id}>
                                        <td>{ course.id }</td>
                                        <td>{ course.description }</td>
                                        <td><button className="btn btn-warning" onClick={() => this.handleDelete(course.id)}>Delete</button></td>
                                        <td><button className="btn btn-success" onClick={() => this.handleUpdate(course.id)}>Update</button></td>
                                    </tr>                                    
                                    )
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

CourseComponent.js

import React, { Component } from 'react'

export default class CourseComponent extends Component {
    render() {
        return (
            <div>
                <h3>Course details</h3>
            </div>
        )
    }
}

实际上发生了ListCoursesComponent.js路由并在页面上呈现。当我单击更新按钮时，它必须呈现CourseComponent.js组件，它仅显示

<h1>Instructor application</h1> not displaying this tag <h3>Course details</h3>, but URL is changing rendering is not happening

Answer 1

在“ Instructor.jsx”中，您是否尝试过更改

<ItemGroup>
    <AppxManifest Include="Package.debug.appxmanifest" Condition="'$(Configuration)'=='Debug'" >
      <SubType>Designer</SubType>
    </AppxManifest>
    <AppxManifest Include="Package.release.appxmanifest" Condition="'$(Configuration)'!='Debug'" >
      <SubType>Designer</SubType>
    </AppxManifest>
  </ItemGroup>

到

<Route path="courses/:id" .../>

开始的'/'很重要

路由在url中发生，但页面未在reactjs中呈现

1 个答案: