Компонент в reactJs

Вам нужно поддерживать состояние, чтобы показать/скрыть форму:

class MyComponent extends Component {
  state = {
    showForm: false
  }

  handleClick = event => {
    event.preventDefault()
    this.setState({showForm: true})
  }

  render() {
    return (
      <a href = "#" onClick = {this.handleClick} className = "btn btn-primary">Menu</a>
      // ...
      {this.state.showForm && <MenuForm />}
    )
  }
}

Если вы используете Реагировать на хуки, это еще проще:

function MyComponent() {
  const [showForm, setShowForm] = useState(false)

  function handleClick(event) {
    event.preventDefault()
    setShowForm(true)
  }

  return (
    <a href = "#" onClick = {handleClick} className = "btn btn-primary">Menu</a>
    // ...
    {showForm && <MenuForm />}
  )

}

Если вы используете react-router-dom и хотите, чтобы URL-адрес менялся при переходе по ссылке, вы можете настроить маршрутизатор следующим образом:

// router.js
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <Route path = "/here" component = {HereComponent} />
    <Route path = "/there" component = {ThereComponent} />
  </BrowserRouter>,
);

Затем вы сможете использовать компонент Link, например,

import { Link } from 'react-router-dom';
<Link to = "/there">there</Link>

Это загрузит компонент и изменит URL-адрес браузера. Вы можете прочитать больше о react-router-dom здесь: https://reacttraining.com/react-router/web/guides/quick-start