The React router used the <link> component instead of the <a> element which we have used in nav. It's necessary to use this if we are working with the React router. Let's add <link> in our navigation instead of the <a> tag and replace the href attribute with two.

The <a> tag:

<li className="active"><a href="#/">Home</a></li> 

Replace this with:

<li className="active"><Link to="#/">Home</Link></li> 

Let's take a look in the browser to see the behavior of <link>:

It's showing an error in the console because we have not added the Link component reference in the ReactRouter object:

var { Router, Route, IndexRoute, IndexLink, Link, browserHistory } = ReactRouter 

We have also added the browserHistory object, which we'll explain later.

Here is what our PageLayout component looks like:

var PageLayout = React.createClass({
render: function() {
return ( 
<main>
    <div className="navbar navbar-default navbar-static-top"
    role="navigation">
        <div className="container">
            <div className="navbar-header">
                <button type="button" className="navbar-toggle"
                data-toggle="collapse"
                data-target=".navbar-collapse">
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                </button>
                <Link className="navbar-brand" to="/">
                EIS</Link>
            </div>
            <div className="navbar-collapse collapse">
                <ul className="nav navbar-nav">
                    <li className="active">
                        <IndexLink activeClassName="active" to="/">
                        Home</IndexLink>
                    </li>
                    <li>
                        <Link to="/edit" activeClassName="active">
                        Edit Profile</Link>
                    </li>
                    <li className="dropdown">
                        <Link to="#" className="dropdown-toggle"
                        data-toggle="dropdown">
                        Help Desk <b className="caret"></b></Link>
                        <ul className="dropdown-menu">
                            <li>
                                <Link to="/alltickets">
                                View Tickets</Link>
                            </li>
                            <li>
                                <Link to="/newticket">
                                New Ticket</Link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div className="container">
        <h1>Welcome to EIS</h1>
        <hr/>
        <div className="row">
            <div className="col-md-12 col-lg-12">
                {this.props.children}
            </div>
        </div>
    </div>
</main>
)
}
})

To activate the default link, we've used <IndexRoute>. This automatically defines the default link's active class. The activeClassName attribute will match the URL with the to value and add the active class to it. If we do not use activeClassName then it cannot add the class automatically on the active link. Let's take a quick look at the browser:

It's working as expected. Let's take a look at the DOM HTML in the console:

We just need to overwrite the Bootstrap default style on <li> .active to <a>:

.navbar-default .navbar-nav li>.active, .navbar-default
.navbar-nav li>.active:hover, .navbar-default 
.navbar-nav li>.active:focus { 
    color: #555; 
    background-color: #e7e7e7; 
}  

We can also pass a parameter in the route to match, validate, and render the UI:

<Link to={`/tickets/${ticket.id}`}>View Tickets</Link>

And in the router we need to add:

<Route path="tickets/:ticketId" component={ticketDetail} /> 

We can add as many parameters as required, and it's easy to pull these out in our component. We'll have access to all the route parameters as objects.

The React router supports the IE9+ browser version but for IE8 you can use the Node npm package, react-router-ie8

NotFoundRoute

The React router also provides a way to show a 404 error on the client side if the path is not matched with the route:

var NoMatch = React.createClass({ 
   render: function() { 
       return (<h1>URL not Found</h1>); 
   } 
}); 
 
<Route path="*" component={NoMatch}/>

Observe the following screenshot:

It's amazing how easily we can handle the unmatched URL.

Here is what our router looks like:

ReactDOM.render(( 
    <Router> 
        <Route path="/" component={PageLayout}> 
            <IndexRoute component={TwoColumnLayout}/> 
                <Route path="/edit" component={Edit} /> 
                <Route path="/alltickets" component={allTickets} /> 
                <Route path="/newticket" component={addNewTicket} /> 
                </Route> 
        <Route path="*" component={NoMatch}/> 
    </Router> 
), document.getElementById('reactapp')); 

Here is the list of other link attributes that we can use:

•  activeStyle: We can use this for the custom inline style. For example:

        <Link activeStyle={{color:'#53acff'}} to='/'>Home</Link>

• onlyActiveOnIndex : We can use this attribute when we add a custom inline style with the activeStyle attribute. It will apply only when we are on an exact link. For example:

        <Link onlyActiveOnIndex activeStyle={{color:'#53acff'}} 
        to='/'>Home</Link>

  http://localhost:9090/react/chapter7/#/?_k=j8dlzv
  http://localhost:9090/react/chapter7/#/edit?_k=yqdzh0 http://localhost:9090/react/chapter7/#/alltickets?_k=0zc49r
  http://localhost:9090/react/chapter7/#/newticket?_k=vx8e8c

 http://localhost:9090/react/chapter7/
 http://localhost:9090/react/chapter7/edit
 http://localhost:9090/react/chapter7/alltickets
 http://localhost:9090/react/chapter7/newticket

Query string parameters

We can also pass query strings as props to any component that will be rendered at a specific route. For accessing these prop parameters, we need to add the props.location.query property in our component.

To see how this works, let's create a new component called RouteQueryString:

var QueryRoute = React.createClass({ 
    render: function(props) { 
        return (<h2>{this.props.location.query.message}</h2>); 
        // Using this we can read the parameters from the 
        request which are visible in the URL's
    } 
}); 
<IndexLink activeClassName='active' to= 
     {{ pathname: '/query', query: { message: 'Hello from Route Query' } }}> 
         Route Query 
</IndexLink> 

Include this route path in the router:

<Route path='/query' component={QueryRoute} /> 

Let's see the output in the browser:

Great, it's working as expected.

Here is what our Router configuration looks like now:

ReactDOM.render((
    <Router>
        <Route path="/" component={PageLayout}>
            <IndexRoute component={TwoColumnLayout}/>
            <Route path="/edit" component={Edit} />
            <Route path="/alltickets" component={allTickets} />
            <Route path="/newticket" component={addNewTicket} />
            <Route path='/query' component={QueryRoute} />
        </Route>
        <Route path="*" component={NoMatch}/>
    </Router>
), document.getElementById('reactapp'));

If we want to customize the history options or use other enhancers from history, then we need to use the useRouterHistory component of React.

useRouterHistory already pre-enhances from the history factory with the useQueries and useBasename from history. Examples include:

import { useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 
const history = useRouterHistory(createHistory)({ 
    basename: '/base-path' 
}) 

Using the useBeforeUnload enhancer:

import { useRouterHistory } from 'react-router' 
import { createHistory,useBeforeUnload } from 'history' 
const history = useRouterHistory(useBeforeUnload(createHistory))() 
history.listenBeforeUnload(function () { 
    return 'Are you sure you want to reload this page?' 
}) 

Before using the React router, we must be aware of React router version updates.

Please visit this link https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md to be updated.

Here is the short list of deprecated syntax in the router:

<Route name="" /> is deprecated. Use <Route path="" /> instead. 
<Route handler="" /> is deprecated. Use <Route component="" /> instead. 
<NotFoundRoute /> is deprecated. See Alternative 
<RouteHandler /> is deprecated. 
willTransitionTo is deprecated. See onEnter 
willTransitionFrom is deprecated. See onLeave 
query={{ the: 'query' }} is deprecated. Use to={{ pathname: '/foo', query: { the: 'query' } }} 

history.isActive is replaced with router.isActive.

RoutingContext is renamed RouterContext.