Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make components "active" using appropriate props #8

Merged
merged 1 commit into from
Jul 6, 2016
Merged

make components "active" using appropriate props #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
make components "active" using appropriate props 
No need for ternaries, you can use the props "activeClassName" and "onlyActiveOnIndex" which will work accordingly.

Source: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/09-index-links

(I know this probably won't get committed, b/c then you'd have to do a whole new video. However, if you do commit, you could comment out the old version so that people won't be completely lost when they DL the source code.)
  • Loading branch information
@gfantom
gfantom committed Jul 6, 2016
commit 2cf5e566c7ad39a7d46e1f31bcb86cc1d28cf14a
12 changes: 6 additions & 6 deletions 2-react-router/src/js/components/layout/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export default class Nav extends React.Component {
render() {
const { location } = this.props;
const { collapsed } = this.state;
const featuredClass = location.pathname === "/" ? "active" : "";
const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
// const featuredClass = location.pathname === "/" ? "active" : "";
// const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
// const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
const navClass = collapsed ? "collapse" : "";

return (
Expand All @@ -35,13 +35,13 @@ export default class Nav extends React.Component {
</div>
<div class={"navbar-collapse " + navClass} id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class={featuredClass}>
<li activeClassName="active" onlyActiveOnIndex={true}>
<IndexLink to="/" onClick={this.toggleCollapse.bind(this)}>Featured</IndexLink>
</li>
<li class={archivesClass}>
<li activeClassName="active">
<Link to="archives" onClick={this.toggleCollapse.bind(this)}>Archives</Link>
</li>
<li class={settingsClass}>
<li activeClassName="active">
<Link to="settings" onClick={this.toggleCollapse.bind(this)}>Settings</Link>
</li>
</ul>
Expand Down