React Router 4의 중첩 경로 (구성 요소에서 시도한 포장 경로)

Question

헤더 또는 정적 콘텐츠와 같은 모든 경로에서 무언가를 렌더링 할 수 있도록 내 경로를 래핑하려고합니다. 나는이 게시물을 여기에서 보았다 : Nested Routes in React Router v4 나는 거기에서 가지고있는 것처럼 나의 길을 감쌌다. 그러나 보여주는 유일한 물건은 포장 구성 요소 다.

그래서 보여주는 유일한 것은 / 및 /dashboard 노선이다 :

포장 경로 :

<Home> 
     <Switch> 
     <Route path="/dashboard" component={Layout} /> 
     <Route component={NotFound} /> 
     </Switch> 
    </Home> 

홈 구성 요소 :

다음

Home Component 
Dashboard 

코드입니다

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div> 
     <h2>Home component</h2> 
     <Link to="/dashboard">Dashboard</Link> 
     </div> 
    ); 
    } 
} 

export default Home; 

레이아웃 구성 요소 :

import React, { Component } from 'react'; 


class Layout extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div> 
     <h2>Layout Component</h2> 
     <h2>Layout Component</h2> 
     </div> 
    ); 
    } 
} 

export default Layout; 

Answer 1

홈 구성 요소에 {this.props.children}을 넣으려고 했습니까? 당신이 상관 없어 경우

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div> 
     <h2>Home component</h2> 
     <Link to="/dashboard">Dashboard</Link> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default Home; 

Answer 2

레이아웃이 구성 요소를 필요로하거나, 명령이 곳 아이들을 렌더링하는 방법을 알고.

그렇지 않으면 라우터는 어린이 경로가 표시되어야하는 위치를 알 수 없습니다. 자식 구성 요소는 children이라는 속성으로 레이아웃에 전달됩니다. 당신은 당신이 그것을 표시 할 곳을 추가해야

{props.children} 

처럼 : 나는 개인적으로 사용하여 선호

import React, { Component } from 'react'; 


class Layout extends Component { 
    constructor(props) { 
    super(props); 
    } 

    static propTypes = { 
    children: PropTypes.node.isRequired, 
    } 

    render() { 
    return (
     <div> 
     <h2>Layout Component</h2> 
     {props.children} 
     </div> 
    ); 
    } 
} 

export default Layout; 

. react router config 그러나해야 할 베어 라우터를 사용한다면.