リアクタ・ルータ3レンダリングされません

Question

私はサイドバーといくつかのコンテンツを表示するルートに行きたいですが、undefinedを私のルートの一部として得て、ただ空白のページに行きます。なぜこれが起こっているのかは分かりませんが、どんな助けもありがたいです。私は、courseIdをパラメータとして取得するルートがなくてもそこに関係しているとはかなり確信していますが、それをどのように入れ子にするか、それをどのように動作させるかはわかりません。ここで

は私のルートは以下のとおりです。必要ならば

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

ここcodesandboxである：ここで

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

はもちろん、コンポーネントがあります編：あなたがルータのparamsからcourseIdを読んでいるが、ルートのルートでそのパラメータがライン上にCourseコンポーネントではありませんhttps://codesandbox.io/s/pw0xvj6r0m

Answer 1

19.

let course = SideNavData[params.courseId];

なぜあなたのリンクをクリックするとナビゲーションコンポーネントそれはあなたが/コース/未定義/ ...

EDITにリダイレクトします。 実際には、あなたがあなたのルーターでそのパラメータを参照することはありません...だから、いつものコース

を未定義ています