Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

react with routing parameter and active NavLink

//this is from index.js
const routing = (
  <Router>
    <div >
    <ul>
      <li><NavLink exact activeNameClass="active " to="/">Home</NavLink></li>
      <li><NavLink exact activeNameClass="active  "  to="/users/123">User</NavLink></li>
      <li><NavLink exact activeNameClass="active  "  to="/employee/Ryaymund">Employee</NavLink></li>
      <li><NavLink exact activeNameClass="active "  to="/contact">Contact</NavLink></li>
      </ul>
      <Switch>
      <Route exact path="/" component={App} />
      <Route  path="/users/:id" component={Users} />
      <Route  path="/employee/:name" component={Employee} />
      <Route  path="/contact" component={Contact} />
      <Route component={Notfounds}/>
      </Switch>
    </div>
  </Router>

//here is the sample from employee.js routing
import React from 'react';

class Employee extends React.Component {
    render() {
        const {params} = this.props.match
        return(
            <>
            <h1>Employee</h1>
            <p>{params.name}</p>
            </>
        )
    }
}
export default Employee
 
PREVIOUS NEXT
Tagged: #react #routing #parameter #active #NavLink
ADD COMMENT
Topic
Name
2+5 =