I am using React for a small web application. It has a basic 5 page website layout. (Home | About us | Contacts | Press | Exhibitions), so I wanted to use an application template that displays only the menu, title and footer, and {props.children} is a component of the React Router route. For this, I used the following code. Suppose everyone there is an import ...
Here is my router code:
export default (props) => { return ( <Router history={ hashHistory }> <Route path="/" component={ Template }> <IndexRoute component={ Home }></IndexRoute> <Route path="about" component={ About }></Route> <Route path="music" component={ Music }></Route> <Route path="store" component={ Store }></Route> <Route path="shows" component={ Shows }></Route> <Route path="contact" component={ Contact }></Route> </Route> </Router> ); }
Now here is my template:
export default ( props ) => { return ( <div className="container"> <Header /> <Menu /> { props.children } <Footer /> </div> ); }
I know that something is wrong, b / c without CSS magic, a: active is always HOME and any other active pages. I.E. if I press "O", then both "Home" and "O" are active. How to use the index route correctly, or should I use the index route in this simple application? If not, how else can I use a template similar to the one I have and render the page as a component differently?
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;
source share