React Navbar onClick 重定向组件

Question

I have doubt about how to redirect another component when i click nevbar items..

Here i have one profile component separated in another folder, if i click profile icon need to go profile component and show that page. I tried to many way but its not showing properly.

In this picture, if click "Edit profile" need to redirect my profile component.

Below my example code:

//Navbar.js

import { useState } from "react";
import myProfile from "../../profile/myProfile";
import { BrowserRouter as Router, NavLink, Redirect, Prompt } from "react-router-dom";
import Route from "react-router-dom/Route";
import { Link } from "react-router-dom";

const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMenuOpen}
      onClose={handleMenuClose}>

      <div className="profile-bar">
        <button onClick={routing}>Edit Profile</button>
      </div>

      <MenuItem onClick={(e) => authProvider.logout(e)}>Logout</MenuItem>
    </Menu>
  );

  const routing = (
    <Router>
      <div>
        <Route to="/editprofile" component={myProfile} />
      </div>
    </Router>
  );

Answer 1

Replace this,

<div className="profile-bar">
  <Link onClick={routing}>Edit Profile</Link>
</div>

With this,

<MenuItem>
  <Link to="/editprofile">Edit Profile</Link>
</MenuItem>