CODEWITHSUNDEEP
reactjsreact-router-v4
jhtong
jhtong

Reputation: 1589

Link does not show while using `react-router`

I am trying to create a navigation bar with react-router in Meteor.

Pages seem to navigate fine when keyed into the browser. However, when using <Link> as given in the docs, the home page appears, while hiding the <Link>.

How does one show the nav bar links given the page?

import React from 'react';
import {Router, Route, IndexRoute, Link, browserHistory} from 'react-router';

/**
 * The React Router client side routing definitions.
 * @namespace Client.Routes
 * @desc This is the main definition for the react router.
 */

import * as Component from './templates.jsx';

const Routes = () => (
  <Router history={browserHistory}>
    <div>
      <Link to="/">Home</Link> <----------- This does not show in HTML page
    </div>
  <Route path="/" component={Component.MasterLayout}>
    <IndexRoute component={Component.Home}/>
  </Route>

  <Route path="/about" component={Component.MasterLayout}>
    <IndexRoute component={Component.About}/>
  </Route>
  <Route path="*" component={Component.MasterLayout}>
    <IndexRoute component={Component.NotFound}/>
  </Route>
</Router>
);

export default Routes;

Upvotes: 1

Views: 55

Answers (2)

jhtong
jhtong

Reputation: 1589

I managed to find the answer.

In the routes.jsx, observed that a master layout template has been configured. Hence, for each page, referencing this MasterLayout will do, like such:

routes.jsx

import React from 'react';

import {Router, Route, IndexRoute, browserHistory, Link} from 'react-router';
/**
 * The React Router client side routing definitions.
 * @namespace Client.Routes
 * @desc This is the main definition for the react router.
 */

import * as Component from './templates.jsx';

const Routes = () => (<Router history={browserHistory}>

  <Route path="/" component={Component.MasterLayout}>
    <IndexRoute component={Component.Home}/>
  </Route>

  <Route path="/about" component={Component.MasterLayout}>
    <IndexRoute component={Component.About}/>
  </Route>

  <Route path="/me" component={Component.MasterLayout}>
    <IndexRoute component={Component.Me}/>
  </Route>

  <Route path="*" component={Component.MasterLayout}>
    <IndexRoute component={Component.NotFound}/>
  </Route>

</Router>);

export default Routes;

For the master layout, include the navigation bar before displaying the children, like so:

master-layout.jsx

import './master-layout.css';
import React, {Component} from 'react';
import {Link} from 'react-router';

class MasterLayoutComponent extends Component {
  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    return (<div>
      <div>
        <Link to="/about">About</Link>
        <Link to="/">Home</Link>
      </div>
      <div>
        {this.props.children}
      </div>
    </div>);
  }
}

const MasterLayout = MasterLayoutComponent;
export {
  MasterLayout,
  MasterLayoutComponent
};

Upvotes: 0

Noah Solomon
Noah Solomon

Reputation: 1261

You can do this by creating what I like to call a "root route" which holds your nav bar with everything nested below it. It looks like you have started this already with your MasterLayout. I would suggest moving your link into your MasterLayout component.

<Router history={browserHistory}>
  <Route path="/" component={ Component.MasterLayout }> <-----Move <Link> into here
    <IndexRoute component={Component.Home}/>
    <Route path="/about" component={Component.About} />
    <Route path="*" component={Component.NotFound} />
  </Route>
</Router>

Upvotes: 1

Related Questions