我正在学习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
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;
答案 0 :(得分:0)
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} />
然后您在代码中使用该字符串名称进行访问。
答案 1 :(得分:0)
添加为答案而不是评论。
可能想将this.state.Courses
传递给CourseList2
,并用来自React-router-dom的CourseDetails2
HOC封装withRouter
,以便它可以访问路由匹配属性。
此外,CourseList2中路线的路径可能应该为path="course/:ID"
,因为这是您在详细信息上访问它的方式。