1. Active Menu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> <style> .link-active { background-color: green; } </style> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.js"></script> <script type="text/babel"> const { HashRouter, Switch, Route, NavLink } = ReactRouterDOM const Home = () => <h1>Home</h1> const Product = () => <h1>Product</h1> const About = () => <h1>About</h1> const NotFound = () => <h1>NotFound</h1> const App = () => ( <HashRouter> <div> <NavLink exact to="/" activeStyle={{ color: 'white' }} activeClassName="link-active"> Home </NavLink> <NavLink to="/product" activeStyle={{ color: 'white' }} activeClassName="link-active"> Product </NavLink> <NavLink to="/about" activeStyle={{ color: 'white' }} activeClassName="link-active"> About </NavLink> <NavLink to="/abcxyz" activeStyle={{ color: 'white' }} activeClassName="link-active"> abcxyz </NavLink> </div> <Switch> <Route path="/" exact component={Home} /> <Route path="/product" component={Product} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </HashRouter> ); ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
2. Custom Menu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> <style> .link-active { background-color: green; } </style> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.js"></script> <!-- =========== components/.........js =========== --> <script type="text/babel"> const { HashRouter, Switch, Route, NavLink, Link } = ReactRouterDOM const Home = () => <h1>Home</h1> const Product = () => <h1>Product</h1> const About = () => <h1>About</h1> const NotFound = () => <h1>NotFound</h1> const App = () => { let CustomLink = ({ label, to, activeOnlyWhenExact }) => { let match = ReactRouterDOM.useRouteMatch({ path: to, exact: activeOnlyWhenExact }); return ( <li className={match ? "link-active" : ""}> <Link to={to}>{label}</Link> </li> ); } return ( <HashRouter> <ul> <CustomLink label="Home" to="/" activeOnlyWhenExact={true} /> <CustomLink label="Product" to="/product" /> <CustomLink label="About" to="/about" /> <CustomLink label="abcxyz" to="/abcxyz" /> </ul> <Switch> <Route path="/" exact component={Home} /> <Route path="/product" component={Product} /> <Route path="/about" component={About} /> <Route path="" component={NotFound} /> </Switch> </HashRouter> ) } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
