javascript - React Router 3不会渲染

我正尝试转到显示侧边栏和一些内容的路由，但是我将undefined作为路由的一部分，而只是转到空白页面。我不太确定为什么会这样，但任何帮助将不胜感激。我很确定这与没有将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')
)

这是课程的组成部分：

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

如果需要，这里是一个codeandbox：https://codesandbox.io/s/pw0xvj6r0m

最佳答案

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

let course = SideNavData[params.courseId];

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

编辑：
实际上，您永远不会在路由器中引用该参数...因此，您将始终拥有未定义的过程

关于javascript - React Router 3不会渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47444847/