Question

我正在尝试使用显示侧边栏和部分内容的路线，但我将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

如果需要，这是一个代码框：https://codesandbox.io/s/pw0xvj6r0m

Answer 1

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

let course = SideNavData[params.courseId];

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

编辑：实际上，你永远不会在你的路由器中引用那个参数......所以你总是会有未定义的课程

React router 3不会呈现

1 个答案: