javascript - React router 3 无法渲染

Question

我正在尝试转到显示侧边栏和一些内容的路线，但我的 route 出现未定义，并且它只是转到空白页面。我不太确定为什么会发生这种情况，但我们将不胜感激。我很确定这与没有获取 courseId 作为参数的路线有关，但我不确定如何将其嵌套或如何使其工作。

这是我的路线:

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')
)

这是类(class)组成部分:

/*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

如果需要，这里有一个代码和框:https://codesandbox.io/s/pw0xvj6r0m

Answer 1

您正在从路由器参数读取 courseId，但第 19 行 Course 组件的根路由中没有该参数。

让 course = SideNavData[params.courseId];

这就是为什么当单击导航组件中的链接时，它会将您重定向到/course/undefined/...

编辑:实际上，你永远不会在路由器中引用该参数......所以你将永远有未定义的过程