こんにちは私はreactjsと私はブートストラップnavbarでルーティングを実装するいくつかの困難に直面して新人です。以下は、サンプルの反応アプリ用に作成したページです。親切に誰も私に道のファイルを変更する方法を助けてください。そうすれば、navbarの他のメニューオプションを使って簡単に経路を決めることができます。以下ブートストラップnavbarコンポーネントと反応ルーティングを実装する方法は?
Index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var Route = require('./config/routes');
var Navbar = require('./navBar');
ReactDOM.render(<Navbar/>,document.getElementById('ContactForm'))
Navbar.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var NavBar = React.createClass({
render: function() {
return (
<div className="navbar navbar-default">
<div className="container">
<div className="navbar-header pull-left">
<ul className="nav navbar-nav">
<li className="active"><a href="/">Home<span className="sr-only">(current)</span></a></li>
</ul>
</div>
<div className="navbar-header">
<ul className="nav navbar-nav">
<li><a href="/contactus">ContactUs<span className="sr-only">(current)</span></a></li>
</ul>
</div>
<div className="navbar-header">
<ul className="nav navbar-nav">
<li><a href="/products">Products<span className="sr-only">(current)</span></a></li>
</ul>
</div>
</div>
</div>
)
}
});
module.exports = NavBar
ルートの設定
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Navbar = require('../navBar');
var Home = require('../home');
var Contactus = require('../contactUs');
var Products = require('../product');
var routes = (
<Router>
<Route path='/' component={Navbar}>
<Route path='/home' component={Home}/>
<Route path='/contactus' component={Contactus}/>
<Route path='/product' component={Products}/>
</Route>
</Router>
);
module.exports = routes;
は異なるページ(ナビゲーションバーに入れてメニューイムプレーニング) 家です.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var Home = React.createClass({
render: function() {
return (
<div>You are in home page</div>
)
}
});
module.exports = Home
contactus.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var ContactUs = React.createClass({
render: function() {
return (
<div>You are in Contact us page</div>
)
}
});
module.exports = ContactUs
product.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var Product = React.createClass({
render: function() {
return (
<div>You are in Product page</div>
)
}
});
module.exports = Product
誰もが正しくナビゲーションバーのメニューをルーティングするために、コードを変更する方法を私を助けてください。
まだルーティングが機能していません。 navbarの他のメニューをクリックしている間、以下のエラーが表示されます。 – knbibin
Uncaught TypeError:未定義のプロパティ 'push'を読み取ることができません Object.handleClick – knbibin
は、プロジェクトのどの部分でも 'handleClick'イベントを使用していますか? –