React Link 无法运行
React Link to function isn't working
抱歉,如果这是一个重复的问题。我似乎无法解决这个问题或找到答案。我有一个基本的 React Router 设置,我正在尝试开始工作,但我真的坚持让 Link 正常工作。
提前致谢。
线框示例
这是代码。
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';
抱歉,如果这是一个重复的问题。我似乎无法解决这个问题或找到答案。我有一个基本的 React Router 设置,我正在尝试开始工作,但我真的坚持让 Link 正常工作。
提前致谢。
线框示例
这是代码。
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';