只渲染根路由。 IndexRoute不呈现组件

Question

我正在构建一个简单的博客应用程序，并且应用程序组件（根路径）重写“posts/new”路径，并且IndexRoute不呈现posts_index组件。

基本上，只有应用程序正在渲染。欢迎任何反馈。见下面

// routes.js

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 

import App from './components/app'; 
import PostsIndex from './components/posts_index'; 
import PostsNew from './components/posts_new'; 

export default (
    <Route path="/" component={App}> 
     <IndexRoute component={PostsIndex}/> 
     <Route path="posts/new" component={PostsNew}/> 
    </Route> 
); 

// app.js

import React from 'react'; 
import { Component } from 'react'; 

export default class App extends Component { 
    render() { 
    return (
     <div>React simple starter</div> 
    ); 
    } 
} 

// posts_new.js

import React, { Component } from 'react'; 

class PostsNew extends Component { 
    render() { 
    return (
     <div>Create Posts</div> 
    ); 
    } 
} 

export default PostsNew; 

// posts_index.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchPosts } from '../actions/index'; 

class PostsIndex extends Component { 
    componentWillMount() { 
    this.props.fetchPosts(); 
    } 

    render() { 
    return (
    <div>List of Blog Posts</div> 
    ); 
    } 
}; 

export default connect(null, { fetchPosts })(PostsIndex); 

Answer 1

react-router会将孩子的嵌套路由向下传递，因此在您的App组件中，您需要呈现this.props.children。

I.e.改变你的App组件到这一点：

export default class App extends Component { 
    render() { 
    return (
     <div>React simple starter</div> 
     { this.props.children } 
    ); 
    } 
} 

开放/时，你应该看到PostsIndex成分，PostsNew打开/posts/new时！

---

更多信息请参见