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 component. 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="/" 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 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 component 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;
The useHistory() hook is first imported and then assigned to a variable, which is subsequently utilized in a button (for example) to redirect users once a specific action is taken. Using the onClick event, we can then call the . push() method to tell React Router where we want the button to redirect to.
The react-router-dom package makes it simple to create new routes. To begin, you wrap the entire application with the <BrowserRouter> tag. We do this to gain access to the browser's history object. Then you define your router links, as well as the components that will be used for each route.
A match object contains information about how a <Route path> matched the URL. match objects contain the following properties: params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path. isExact - (boolean) true if the entire URL was matched (no trailing characters)
for index route you should use IndexLink comp , 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>
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With