3.activeStyle-ClassName


/ Published in: Other
Save to your folder(s)



Copy this code and paste it in your HTML
  1. import React from 'react';
  2. import { Router, Route, Link, hashHistory } from 'react-router';
  3.  
  4. const Home = () => <div><h1>Home</h1><Links /></div>;
  5. const About = () => <div><h1>About</h1><Links /></div>;
  6. const Contact = () => <div><h1>Contact</h1><Links /></div>;
  7.  
  8. const Links = () =>
  9. <nav>
  10. <Link to="/" activeStyle={{ color: 'green' }}>Home</Link>
  11. <Link to="about" activeStyle={{ color: 'green' }}>About</Link>
  12. <Link to="contact" activeClassName="active">Contact</Link>
  13. </nav>
  14.  
  15. const App = () => {
  16. return (
  17. <Router history={ hashHistory }>
  18. <Route path="/" component={Home}></Route>
  19. <Route path="/about" component={About}></Route>
  20. <Route path="/contact" component={Contact}></Route>
  21. </Router>
  22. )
  23. };
  24.  
  25. export default App;

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.