Twitter bootstrap 如何使用引导navbar组件实现react路由？

嗨，我是reactjs的新手，我在使用引导navbar实现路由时遇到了一些困难。下面是我为示例react应用程序创建的页面。请任何人帮助我如何修改路由文件，以便我可以轻松地使用导航栏中的其他菜单选项进行路由

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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var Route=require（“./config/routes”）；
var-Navbar=需要（'./Navbar'）；
ReactDOM.render（，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 ReactDOM=require（'react-dom'）；
var NavBar=React.createClass({
渲染：函数（）{
返回(









)
}
});
module.exports=导航栏

路由配置

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;

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=需要（“../product”）；
变量路由=(
);
module.exports=路线；

下面是不同的页面（我计划将菜单放入导航栏） home.jsx

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var Home=React.createClass({
渲染：函数（）{
返回(
你在主页上
)
}
});
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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var ContactUs=React.createClass({
渲染：函数（）{
返回(
您在联系我们页面
)
}
});
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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var Product=React.createClass({
渲染：函数（）{
返回(
您已进入产品页面
)
}
});
module.exports=产品

---

任何人请帮助我如何修改代码，以便正确通过导航栏菜单。

您需要在

导航栏

组件中进行一些更改，请使用此部分：

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;


var NavBar = React.createClass({

    render: function () {

        return (
            <div>
                <div className="navbar navbar-default">
                    <div className="container">
                        <div className="navbar-header pull-left">
                            <ul className="nav navbar-nav">
                                <li className="active"><Link to="/home">Home<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>

                        <div className="navbar-header">
                            <ul className="nav navbar-nav">
                                <li><Link to="/contactus">ContactUs<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>

                        <div className="navbar-header">
                            <ul className="nav navbar-nav">
                                <li><Link to="/products">Products<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>
                    </div>
                </div>
                {this.props.children}
            </div>
        )

    }

});

module.exports = NavBar

变化：

*在玩

react router

时，始终使用

链接

而不是

href

和

a

标记。（阅读

a

和

链接之间的差异）

*您将
NavBar
定义为主页（HomePage），并在其中定义了
rendering
其他
组件
，因此您需要定义一个位置，以便
通过
{this.props.children}呈现这些子组件

*渲染错误的组件，需要返回路由器部件，请使用以下方法：
ReactDOM.render（，document.getElementById（'ContactForm'））

*您忘记包含历史记录部分，请导入
hashhistory
并将其与
路由器一起使用

阅读这些关于路由器的文章，它将帮助您：




如果您需要任何帮助，请告诉我。
路由仍然不起作用。单击导航栏中的其他菜单时，我得到以下错误。未捕获类型错误：无法读取未定义对象的属性“push”。在项目的任何部分使用
handleClick
事件的handleClick u？？不，我不使用它，但如果我们渲染路由组件，则无法看到导航栏，因为导航栏是一个单独的组件。我以前已经做过三次了。
var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;


var NavBar = React.createClass({

    render: function () {

        return (
            <div>
                <div className="navbar navbar-default">
                    <div className="container">
                        <div className="navbar-header pull-left">
                            <ul className="nav navbar-nav">
                                <li className="active"><Link to="/home">Home<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>

                        <div className="navbar-header">
                            <ul className="nav navbar-nav">
                                <li><Link to="/contactus">ContactUs<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>

                        <div className="navbar-header">
                            <ul className="nav navbar-nav">
                                <li><Link to="/products">Products<span className="sr-only">(current)</span></Link></li>
                            </ul>
                        </div>
                    </div>
                </div>
                {this.props.children}
            </div>
        )

    }

});

module.exports = NavBar

var routes = (
    <Route path='/' component={Navbar}>
        <Route path='/home' component={Home}/>
        <Route path='/contactus' component={Contactus}/>
        <Route path='/product' component={Products}/>
    </Route>
);
module.exports = routes;

var ReactRouter = require('react-router');
var hashHistory = ReactRouter.hashHistory;

ReactDOM.render(
    <Router history={hashHistory}>    
        {Route}    
    </Router>,
    document.getElementById('ContactForm')
);