javascript - React Router 不工作；索引路线

Question

很抱歉，如果这是一个重复的问题。我似乎无法解决这个问题或找到答案。我有一个基本的 React Router 设置，我正在尝试让它工作，但我真的坚持将 IndexRoute 获取到它的链接组件。我觉得我没有理解这个库如何工作的要点，并且希望得到一些建议。

提前致谢。

Wireframe Example

这是代码。

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

您的FrontPage.js是主页，以及您通过react-router作为子组件传递的所有其他组件 ，因此您需要在 FrontPage.js 中指定要渲染您的子组件的位置，您忘记添加这一行:

{this.props.children}

试试这个:

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