react with routing parameter and active NavLink

Raymund Alum answered on July 7, 2022 Popularity 3/10 Helpfulness 1/10

answer react with routing parameter and active NavLink

react with routing parameter and active NavLink

Comment

-1

//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

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript routing

Link to this answer
Share Copy Link

Contributed on Jul 07 2022

Raymund Alum

0 Answers Avg Quality 2/10

react with routing parameter and active NavLink

Contents

More Related Answers

react with routing parameter and active NavLink

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.