React Router无法正常工作； 索引路线

Question

Sorry if this is a duplicate question. I can't seem to solve this or find an answer. I have a basic React Router setup that I'm trying to get working and I'm really stuck on getting IndexRoute to it's linked component. I feel like I'm missing the point on how this library works and would love some advice.

Thanks in advance.

Wireframe Example

Here's the code.

App.js

import React from 'react'
import reactDOM from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import About from "./About Us/About"
import FrontPage from "./Front Page/FrontPage"
import HeaderNavigation from './General/HeaderNavigation';


reactDOM.render((
    <Router history = {hashHistory}>
        <Route path="/" component={FrontPage}>
            <IndexRoute component = {HeaderNavigation}/>
            <Route path="/About" component={About}/>
        </Route>
    </Router>
), document.getElementById('app'));

HeaderNavigation.js

import React from 'react';
import { Nav, Navbar, NavDropdown, MenuItem, NavItem, Link } from 'react-bootstrap';


export default React.createClass ({
    render() {
        var Dlink = 'https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-9/12373357_497613000418878_5796459715901767943_n.png?oh=0484e476279b076d27eeeadc2d12b1d8&oe=590CD405'
        return (
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                        <img src= {Dlink} alt="Legalink" height="6000 px"/>
                    </Navbar.Brand>
                </Navbar.Header>
                    <Nav bsStyle = "pills">
                        <NavItem eventKey = "{1}" disabled>Product</NavItem>
                        <NavItem eventKey = "{2}">Support</NavItem>
                        <NavDropdown title  ="More" eventKey = "{3}">
                            <MenuItem eventKey = "{1}">Background</MenuItem>
                            <MenuItem eventKey = "{2}">Contact Us</MenuItem>
                        </NavDropdown>
                    </Nav>
            </Navbar>
        );
    }
});

FrontPage.js

import React from 'react';

import Carousel from './Carousel';
import Body from './Body';

export default React.createClass({
    render() {
        return <div>
            <Carousel/>,
            <Body/>,
        </div>
    }
})

Body.js

import React from "react";

/* Styles */
import Button from 'react-bootstrap/lib/Button';
import Grid from 'react-bootstrap/lib/Grid';
import Jumbotron from 'react-bootstrap/lib/Jumbotron';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import typography from "../Assets/Typography"

export default React.createClass ( {
    render() {
        return (
            <div>
                <Jumbotron>
                    <Grid className = {typography}>
                        <h1>Tiger Jockey</h1>
                        <p>Bringing M&A to the Agile century</p>
                    </Grid>
                </Jumbotron>

                <Grid>
                    <Row>
                        <Col md={4}>
                            <h2 className = {typography}>Ride the Tiger</h2>
                            <p>Be the Jockey.</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Please your Customer</h2>
                            <p>Win more work</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Improve your process</h2>
                            <p>Make more money</p>
                            <p><Button>View details</Button></p>
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
});

Carousel.js

import React from 'react';
import {Carousel, CarouselItem, CarouselCaption, Image} from 'react-bootstrap';



export default React.createClass ( {
    render() {
        return (
            <Carousel>
                <CarouselItem>
                    <Image src = "https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/Temp_SimpleKanbanBoard_PPT.jpg" responsive/>
                    <div className ="Carousel-Caption">
                        <h3>Uno</h3>
                        <p>Duos</p>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <Image height = {702} width = {2028} src = "http://assets.nydailynews.com/polopoly_fs/1.1709251.1393876942!/img/httpImage/image.jpg_gen/derivatives/article_750/nup-148281-1237-jpg.jpg"/>
                    <div className ="Carousel-Caption">
                        <h3> Here we go</h3>
                        <p>Lawyered</p>
                    </div>
                </CarouselItem>
            </Carousel>
        );
    }
});

Answer 1

Your FrontPage.js is the main page, and all other component you are passing as child component by react-router , so you need to specify the place where you want to render your child component in FrontPage.js , you forgot to add this line:

{this.props.children}

Try this:

import React from 'react';

import Carousel from './Carousel';
import Body from './Body';

export default React.createClass({
    render() {
        return 
        <div>
            <Carousel/>
            <Body/>
            {this.props.children}
        </div>
    }
})