reactjs - 使用 React-Router 显示细节组件
问题描述
我正在学习 react-router 并尝试显示课程列表和课程详细信息。但是现在,CourseDetail2 组件页面不显示。帮助!
App.js ` import React, { Component } from '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;
解决方案
location, match and history
只有在使用高阶组件包装组件时才能访问对象withRouter
。
现在您无权访问this.props.match
CourseDetail2 组件。
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} />
您可以在代码中使用该字符串名称进行访问。
推荐阅读
- android - java.lang.IndexOutOfBoundsException: Invalid index 6, size is 6 in android studio
- swift - 我想取出委托中获取的坐标
- css - 如何使文本与文本框均匀分布?
- reactjs - 无法访问 React 组件返回的属性
- html - 如何在不滚动的情况下将多个 iframe 放入单个页面?
- javascript - 我想我了解异步、等待、承诺和回调,但我对异步代码有疑问
- awk - 每行每组只有一条记录
- c# - 实体框架代码优先 - 处理继承和组合
- javascript - 在字段更改时向服务发送更新的值,该字段已为先前的值执行一次
- bash - 如何在 bash 脚本中读取 Twitter 用户的个人资料