Question

嗨，我是反应中的新手，我在使用bootstrap 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;

下面是不同的页面（我计划放入导航栏的菜单） 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

任何人都可以帮我修改代码，以便正确浏览导航栏菜单。

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

的变化：

*使用Links时，始终使用href代替a和react-router代码。（阅读a和Link之间的差异）

*您将NavBar定义为主页（主页），并在其中定义了rendering其他components，因此您需要定义一个您想要render的位置这些子组件由{this.props.children}

组成

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

*您忘记包含历史记录部分，导入hashhistory并将其与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/

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

如何使用bootstrap navbar组件实现反应路由？

1 个答案: