Question

我正在学习react-router，并试图显示课程列表和课程详细信息。但是现在，不显示CourseDetail2组件页面。救命！

App.js ` 从'react'导入React，{组件}; 从'axios'导入axios; 从“ ./components/CourseList2”导入CourseList2

//campus data
const campusData = [
{ id: 1, value:'A',name: 'A' },
{ id: 2, value:'B',name: 'B' },
{ id: 3, value:'C',name: 'C' }

]
class App extends Component {

state={campus:null,
   Courses:[]}
 componentDidMount(){
 //api call
setState={Courses:response.data}
}
//event handler
handleCampusChkChange()=>{
//code 
}
render() {
 return (
  <div className="App">


<Campus  key={item.id} {...item} onChange={this.handleCampusChkChange} />
<CourseList2 courses={this.state.Courses}/>

</div>


  );
  }
}

export default App;
`

CourseList2.js

import React  from 'react';

import CourseDetail2 from './CourseDetail2';
import {BrowserRouter as Router, Route, Link,Redirect} from 'react-router-dom';
import './CourseItem.css';
import App from './App';
const CourseList2=({Courses})=>{
    console.log("coruses="+Courses);
    const renderedList= Courses.map(course=>{
        return (<div className="item" >
     
    
        <div class="content">
        <div class="header">
        
        <h4>
             {course.SUBJECT} {course.CATALOG} {course.DESCR}  
             </h4> </div> 
      
        <Link  to={{ pathname: 'course/'+course.ID}}
                            
                            key={course.ID}>
                            View More
                        </Link>
        
       
    
          
        </div>
        </div> 
       
          
       
    )
    });
    return (
     
    <Router><div className="List ui relaxed divided list">

        {renderedList}
     
        <Route path="course/:course.ID" component={CourseDetail2} />
   
   </div></Router>);
}

export default CourseList2

CourseDetail2.js

import React, { Component } from 'react';


   class CourseDetail2 extends Component {
    
    render(){
     
    return (
       <div>
        Course Detail: CLASS ID {this.props.match.params.ID}
      
    </div>
   
    );
    }   
};
export default CourseDetail2;

Answer 1

location, match and history对象只能在用高阶组件withRouter包装组件时访问。

目前，您无权访问CourseDetail2组件中的this.props.match。

import React, { Component } from 'react';
import {withRouter} from 'react-router';


   class CourseDetail2 extends Component {

    render(){

    return (
       <div>
        Course Detail: CLASS ID {this.props.match.params.courseID}

    </div>

    );
    }   
};
export default withRouter(CourseDetail2);

:之后的字符串也与代码不匹配。可以是任何东西。

<Route path="course/:courseID" component={CourseDetail2} />

然后您在代码中使用该字符串名称进行访问。

Answer 2

添加为答案而不是评论。

可能想将this.state.Courses传递给CourseList2，并用来自React-router-dom的CourseDetails2 HOC封装withRouter，以便它可以访问路由匹配属性。

此外，CourseList2中路线的路径可能应该为path="course/:ID"，因为这是您在详细信息上访问它的方式。

使用React-Router显示详细组件

2 个答案: