React Router 3不会渲染

Question

I am trying to go to a route that shows a sidebar and some content but I get undefined as part of my route and it just goes to a blank page. I am not quite sure why this is happening but any help would be appreciated. I am pretty sure it has to do with there not being a route to get the courseId as a parameter, but I am not sure how to nest that in or how to get it to work.

Here are my routes:

 import App from './components/App' import Course from './routes/Course/components/Course' import AnnouncementsSidebar from './routes/Course/routes/Announcements/components/Sidebar' import Announcements from './routes/Course/routes/Announcements/components/Announcements' import Announcement from './routes/Course/routes/Announcements/routes/Announcement/components/Announcement' import AssignmentsSidebar from './routes/Course/routes/Assignments/components/Sidebar' import Assignments from './routes/Course/routes/Assignments/components/Assignments' import Assignment from './routes/Course/routes/Assignments/routes/Assignment/components/Assignment' render( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="course/:courseId" component={Course}> <Route path="announcements" components={{ sidebar: AnnouncementsSidebar, main: Announcements }}> <Route path=":announcementId" component={Announcement} /> </Route> <Route path="assignments" components={{ sidebar: AssignmentsSidebar, main: Assignments }}> <Route path=":assignmentId" component={Assignment} /> </Route> </Route> </Route> </Router>, document.getElementById('root') ) 

Here is the course component:

 /*globals SideNavData:true */ const styles = {} styles.sidebar = { float: 'left', width: 200, padding: 20, borderRight: '1px solid #aaa', marginRight: 20 } class Course extends Component { render() { let { sidebar, main, children, params } = this.props let course = SideNavData[params.courseId] let content if (sidebar && main) { content = ( <div> <div className="Sidebar" style={styles.sidebar}> {sidebar} </div> <div className="Main" style={{ padding: 20 }}> {main} </div> </div> ) } else if (children) { content = children } else { content = <Dashboard /> } return ( <div> <h2>{course.name}</h2> <Nav course={course} /> {content} </div> ) } } module.exports = Course 

here is a codesandbox if needed: https://codesandbox.io/s/pw0xvj6r0m

Answer 1

You are reading courseId from router params but there isn't that parameter in Root route in Course component on line 19.

let course = SideNavData[params.courseId];

That is why when clicking link in you Nav component it redirects you to /course/undefined/...

EDIT: Actually, you never reference that parameter in your Router... So you will always have undefined course