ReactJS 라우터가 라우팅되지 않음

Question

React-Router가 SPA에서 작동하는 데 작업하고 있지만 App 구성 요소 이외의 것을 렌더링 할 수는 없습니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'; 
import Parameter from './components/parameter/Parameter'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
      </div> 
     ) 
    } 
} 

class Test extends React.Component { 
    render() { 
     return (
      <div className="container"> 
       <h1>TEST PAGE</h1> 
      </div> 
     ) 
    } 
} 

var routes = (
    <Route name="root" component={App} path="/"> 
     <Route component={Test} path="test" /> 
     <Route component={Parameter} path="parameter" /> 
    </Route> 
) 

ReactDOM.render((
    <Router history={browserHistory} routes={routes} /> 
), document.getElementById('react')) 

Answer 1

당신은 지정되지 않습니다. App 구성 요소는 중첩 된 모든 경로에 대한 레이아웃처럼 작동합니다.

중첩 된 경로에 지정하는 구성 요소에는 특정 경로에 도달 할 때 레이아웃/상위 구성 요소 내에서 이동할 위치가 필요합니다.

이 작업을 수행하는 가장 간단한 방법은 App 구성 요소의 어딘가에서 {this.props.children}을 사용하는 것입니다. 아래 예제를 참조하십시오. 보다 깊이 예를 들어

class App extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

의 반응 라우터를 REPO에서 active-links 예를 참조하십시오

여기에 다시 응용 프로그램 구성 요소입니다. 이 예에서 App 구성 요소 내에서 children이 소품으로 사용 가능하다는 것을 알 수 있으며 관련 경로에 도달하면 중첩 된 경로에서 다른 구성 요소를 렌더링합니다. 예를 들어, / 라우트를 치는 경우 Index 구성 요소가 App인데, 여기에는 {children}이 위치합니다. 직접 중첩 된 라우트 <IndexRoute ... />이 있기 때.에 위치합니다.

React는 구성 요소의 하위 항목에 액세스하는 방법으로 this.props.children을 제공합니다. 구성 요소를 다른 구성 요소에 데이터로 전달할 수 있습니다. 이 경우 자식 구성 요소를 App 구성 요소 내에 렌더링합니다.

Answer 2

당신이 라우터 V4 반응 사용하는 경우, 나는 당신이하지 둥지 <Route />의이 라우터 V4 반응 할 수 있기 때문에 중첩 된 구성 요소가 렌더링되지 않는 이유라고 생각합니다.

나는이 이전에 질문을 열어 : 당신이 중첩 된 구성 요소는 App 구성 요소 내에서 렌더링 할 위치

How to nest routes in React Router v4?