I am using React for a small web-app. It has a basic 5 page website layout. (Home|About|Contact|Press|Shows) so I wanted to use an app template that just displays a menu, the header and the footer, and the {props.children} would be the React Router's route ponent. To achieve this, I used the following code. Assume all the imports are there...

Here is my router code:

export default (props) => {
    return (
        <Router history={ hashHistory }>
            <Route path="/" ponent={ Template }>
                <IndexRoute ponent={ Home }></IndexRoute>
                <Route path="about"   ponent={ About }></Route>
                <Route path="music"   ponent={ Music }></Route>
                <Route path="store"   ponent={ Store }></Route>
                <Route path="shows"   ponent={ Shows }></Route>
                <Route path="contact" ponent={ Contact }></Route>
            </Route>
        </Router>
    );
}

Now here is my template:

export default ( props ) => {
    return (
        <div className="container">
            <Header />
            <Menu />
            { props.children }
            <Footer />
        </div>
    );
}

I know something is wrong, b/c without CSS magic, a:active is always HOME and any other active pages. I.E. if I click About, then both Home and About are active. How can I correctly use an index route, or should I even use an index route in this simple of an app? If not, then how else can I use a template like the one I have and pass in a page as a ponent in a different way?

Update: Here is my Menu.js file...

const Menu = () => {
    return (
        <div>
          <nav>
            <Link activeClassName="nav-active" to="/">Home</Link>
            <Link activeClassName="nav-active" to="about">About</Link>
            <Link activeClassName="nav-active" to="music">Music</Link>
            <Link activeClassName="nav-active" to="shows">Shows</Link>
            <Link activeClassName="nav-active" to="store">Store</Link>
            <Link activeClassName="nav-active" to="contact">Contact</Link>
          </nav>
          <hr className="line" />
        </div>
    );
}

export default Menu;

I am using React for a small web-app. It has a basic 5 page website layout. (Home|About|Contact|Press|Shows) so I wanted to use an app template that just displays a menu, the header and the footer, and the {props.children} would be the React Router's route ponent. To achieve this, I used the following code. Assume all the imports are there...

Here is my router code:

export default (props) => {
    return (
        <Router history={ hashHistory }>
            <Route path="/" ponent={ Template }>
                <IndexRoute ponent={ Home }></IndexRoute>
                <Route path="about"   ponent={ About }></Route>
                <Route path="music"   ponent={ Music }></Route>
                <Route path="store"   ponent={ Store }></Route>
                <Route path="shows"   ponent={ Shows }></Route>
                <Route path="contact" ponent={ Contact }></Route>
            </Route>
        </Router>
    );
}

Now here is my template:

export default ( props ) => {
    return (
        <div className="container">
            <Header />
            <Menu />
            { props.children }
            <Footer />
        </div>
    );
}

I know something is wrong, b/c without CSS magic, a:active is always HOME and any other active pages. I.E. if I click About, then both Home and About are active. How can I correctly use an index route, or should I even use an index route in this simple of an app? If not, then how else can I use a template like the one I have and pass in a page as a ponent in a different way?

Update: Here is my Menu.js file...

const Menu = () => {
    return (
        <div>
          <nav>
            <Link activeClassName="nav-active" to="/">Home</Link>
            <Link activeClassName="nav-active" to="about">About</Link>
            <Link activeClassName="nav-active" to="music">Music</Link>
            <Link activeClassName="nav-active" to="shows">Shows</Link>
            <Link activeClassName="nav-active" to="store">Store</Link>
            <Link activeClassName="nav-active" to="contact">Contact</Link>
          </nav>
          <hr className="line" />
        </div>
    );
}

export default Menu;

• javascript
• reactjs
• ecmascript-6
• react-router

• since every url starts with / a:active will always show Home as active. I would suggest to put something like path='home' and use indexRedirect. – Vikramaditya Commented Jun 28, 2016 at 18:57
• or if you want some links to be active if only Home ponent is rendered, then use <IndexLink /> from react-router. – Vikramaditya Commented Jun 28, 2016 at 19:01
• @Vikramaditya, this doesn't solve my issue of using a DRY template? Could you provide a more concise answer? – Joshua Michael Calafell Commented Jun 28, 2016 at 19:28
• how are you styling the active route? – QoP Commented Jun 28, 2016 at 19:31
• @QoP, forget about styles, it's irrelevant to my question... – Joshua Michael Calafell Commented Jun 28, 2016 at 19:33

1 Answer 1

for index route you should use IndexLink p , otherwise 'Home' will be active allways

import {Link,IndexLink} from 'react-router';

<IndexLink activeClassName="nav-active" to="/">Home</IndexLink>
<Link activeClassName="nav-active" to="about">About</Link>
<Link activeClassName="nav-active" to="music">Music</Link>
 ...