Show Detail Component with React-Router - reactjs

Question

I am learning react-router and trying to display a list of courses and course detail. But now, the CourseDetail2 component page does not display. Help!
App.js
`
import React, { Component } from 'react';
import axios from 'axios';
import CourseList2 from './components/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

Adding as answer instead of comment.
Probably want to pass this.state.Courses to CourseList2, and wrap CourseDetails2 with withRouter HOC from react-router-dom so it can access the route match prop.
Also, the path in the route in CourseList2 should probably be path="course/:ID" since that is how you access it on the details.

Answer 2

location, match and history objects can only be accessed when you wrap the component with the higher order component withRouter.
Right now you don't have access to this.props.match in CourseDetail2 component.
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);
Also the string after : doesn't have match with the code. It can be anything.
<Route path="course/:courseID" component={CourseDetail2} />
And you access using that string name in your code.