反应链接到function不起作用
对不起，如果这是一个重复的问题。 我似乎无法解决这个问题或find答案。 我有一个基本的React路由器设置，我正在努力工作，我真的被困在让链接function工作。
提前致谢。
线框示例
这是代码。
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 ( <div> <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}"> <Link to ="/About">About</Link> </NavItem> <NavDropdown title ="More" eventKey = "{3}"> <MenuItem eventKey = "{1}">Background</MenuItem> <MenuItem eventKey = "{2}">Contact Us</MenuItem> </NavDropdown> </Nav> </Navbar> {this.props.children}, </div> ); } });
About.js
import React from "react"; /* Styles */ import Button from 'react-bootstrap/lib/Button'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; export default React.createClass({ render() { return ( <div> <Grid> <Row> <Col md={4}> <h2>Legalink</h2> <p>Our vision is to change the way Law firms engage with work and prove there worth</p> <p><Button>View details »</Button></p> </Col> <Col md={4}> <h2>Tiger Jockey's</h2> <p>Our Tiger Jockey's are C-suite level professionals who know what it takes to stay on the ride</p> <p><Button>View details »</Button></p> </Col> <Col md={4}> <h2>Based in Melbourne Australia and founded by a mixture of Lawyers and Engineer's</h2> <p>The right team to bring you the right product</p> <p><Button>View details</Button></p> </Col> </Row> </Grid> </div> ); } });
FrontPage.js
/** * Created by Hewlbern on 30-Jan-17. */ import React from 'react'; import Carousel from './Carousel'; import Body from './Body'; import Footer from './Footer'; export default React.createClass({ render() { return <div> <Carousel/>, <Body/>, <Footer/>, </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> ); } });
我得到的错误是
"Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `HeaderNavigation`. printWarning @ warning.js:36 invariant.js:51Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `HeaderNavigation`. at invariant (invariant.js:44) at instantiateReactComponent (instantiateReactComponent.js:68) at instantiateChild (ReactChildReconciler.js:44) at ReactChildReconciler.js:71 at traverseAllChildrenImpl (traverseAllChildren.js:77) at traverseAllChildrenImpl (traverseAllChildren.js:93) at traverseAllChildren (traverseAllChildren.js:172) at Object.instantiateChildren (ReactChildReconciler.js:70) at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) at ReactDOMComponent.mountChildren (ReactMultiChild.js:226) ReactDOMComponentTree.js:106Uncaught TypeError: Cannot read property '__reactInternalInstance$gz5475fv0m1hbexy0fg6kzkt9' of null at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:106) at findParent (ReactEventListener.js:38) at handleTopLevelImpl (ReactEventListener.js:67) at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140) at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62) at Object.batchedUpdates (ReactUpdates.js:97) at dispatchEvent (ReactEventListener.js:147)"
Link ，因为你使用它来自react-router ，而不是react-bootstrap 。
您应该可以通过更改来修复它：
import { Nav, Navbar, NavDropdown, MenuItem, NavItem, Link } from 'react-bootstrap';
至：
import { Link } from 'react-router'; import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';