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

、反応-ルータをレポからactive-links例を参照してください。

は、ここで再び、あなたのアプリケーションコンポーネントです。これらの例では、がAppコンポーネント内の小道具として利用可能であり、関連ルートがヒットしたときにネストされたルートから他のコンポーネントをレンダリングすることがわかります。たとえば、/ルートを押すと、直接ネストされたルート<IndexRoute ... />が存在するため、IndexコンポーネントがAppになります。{children}が配置されます。

Reactは、コンポーネントの子にアクセスする方法としてthis.props.childrenを提供します。これにより、コンポーネントを別のコンポーネントにデータとして渡すことができます。この場合、子コンポーネントをAppコンポーネント内でレンダリングします。

Answer 2

あなたはルータV4を反応させるの使用している場合は、私はあなたがでない巣<Route /> sがルータV4を反応させることができるので、ネストされたコンポーネントがレンダリングされていない理由があると思います。

私はこの以前に質問を開い：あなたは、ネストされたコンポーネントがAppコンポーネント内でレンダリングしたい場所

How to nest routes in React Router v4?