How to implement react routing with bootstrap navbar component?

Question

Hi I'm new to reactjs and Im facing some difficulties in implementing routing with bootstrap navbar. Below are the pages which I created for my sample react app. Kindly anyone please help me how to modifiy the route file, so that I can easliy route with other menu options in the 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

route config

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;

below are the different pages(menus Im planing to put in the navbar) 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

Anyone please help me how to modify the code in order to route through the navbar menus correctly.

Answer 1

You need to do some changes in NavBar Component, Use this part:

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

Do this part for routing:

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;

Import the history and You this to render your route:

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

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

Changes:

*Always use Links instead of href and a tag, when playing with react-router. (read the diff between a and Link)

*You defined NavBar as main page (home page), and rendering other components inside it, so you need to define a place where you want to render these child component by {this.props.children}

*You are rendering the wrong component, you need to return router part, use this: ReactDOM.render(<Route/>,document.getElementById('ContactForm'))

*You forgot to include the history part, Import the hashhistory and use it with router.

Read these articles on Router it will help you:

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/

Let me know if you need any help.