如何使用Bootstrap导航栏组件实现React路由？

Question

你好，我刚接触ReactJS，现在在使用Bootstrap导航栏实现路由时遇到了一些困难。以下是我为样例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'))

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;

以下是我计划在导航栏中放置的不同页面（菜单）： home.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

请帮我修改代码，以使导航栏菜单正确路由。

- knbibin

Answer 1

你需要在NavBar组件中做一些更改，使用以下部分：

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;

导入history并使用它来呈现您的路由：

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

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

变更：

*在使用react-router时，始终使用Links而不是href和a标记。(读取a和Link之间的差异)

*您将NavBar定义为主页（首页），并在其中渲染其他components，因此您需要定义一个位置，在这个位置中您想要通过{this.props.children}渲染这些子组件。

*您正在渲染错误的组件，您需要返回路由器部分，请使用： ReactDOM.render(<Route/>,document.getElementById('ContactForm'))

*您忘记包含历史部分。导入hashhistory并与router一起使用。

阅读这些关于Router的文章会有所帮助：

https://css-tricks.com/learning-react-router/

https://medium.com/@dabit3/beginner-s-guide-to-react-router-53094349669#.gv7fmr3oz

https://www.themarketingtechnologist.co/react-router-an-introduction/

如果您需要任何帮助，请告诉我。

- Mayank Shukla

---

路由仍然无法正常工作。当我点击导航栏中的其他菜单时，会出现以下错误。 - knbibin

未捕获的类型错误：无法读取未定义属性的“push” 在Object.handleClick - knbibin

你在项目的任何部分使用 handleClick 事件吗？ - Mayank Shukla

但是如果我们渲染路由组件，那么我们将无法看到导航栏，因为导航栏是一个单独的组件。我之前已经尝试过这个方法。 - knbibin

先让它工作起来再解释一切，我对ans做了一些更改并使用了那部分。原因是如果您没有呈现路由器，那么您的React如何知道您的路由部分呢:)? 您始终需要呈现路由器，使所有组件成为react-router的一部分。阅读器路由将起作用:) - Mayank Shukla