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.

Mayank Shukla · Accepted Answer · 2017-02-14 07:37:44Z

2

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.

edited Feb 14, 2017 at 7:37

answered Feb 14, 2017 at 6:50

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

knbibin Over a year ago

Still the routing is not working. while clicking on the other menus in the navbar Im getting the below error.

knbibin Over a year ago

Uncaught TypeError: Cannot read property 'push' of undefined at Object.handleClick

Mayank Shukla Over a year ago

r u using handleClick event at any part of the project ??

knbibin Over a year ago

No Im not using that

knbibin Over a year ago

But if we render the route component then we are not able to see the navbar because navbar is a separate component. I already thried this before.

|

Collectives™ on Stack Overflow

How to implement react routing with bootstrap navbar component?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related