[英]React Router isn't working ; Index Route
抱歉,如果这是一个重复的问题。 我似乎无法解决此问题或找到答案。 我有一个基本的React Router
设置,我试图开始工作,但我真的很想让IndexRoute
链接到它的链接组件。 我觉得我缺少关于该library
如何工作的要点,并且希望得到一些建议。
提前致谢。
这是代码。
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>
);
}
});
您FrontPage.js
是主要的网页,和所有其他component
你逝去的child
组成的react-router
,所以你需要指定您希望的地方render
你的child
在组件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>
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.